D3：对象内部具有空值的非连续折线图

Question

我正在尝试制作一个与 D3 的创建者本人提供的非常相似的折线图 from this example。

为了处理空值，他使用了一个 defined() 函数，如下所示：

var line = d3.line()
.defined(function(d) { return d; })
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });

然后，如果找到空值而不是对象，它将被忽略，图表中将出现这样的漏洞：

在此示例中，数据格式如下：

data = [null, {"x":x1, "y":y1}, {"x":x2, "y":y2}, null]

但我正在研究一个更棘手的 cas，因为它是一个像这样格式化的时间序列:

data = [{"date":1980,"value":80},,{"date":1985,"value":82},{"date":1990,"valye":74},{"date":1995,"value":83},{"date":2000,"value":83},{"date":2005,"value":81},{"date":2010,"value":null},{"date":2015,"value":null}]

如您所见，空值位于多个对象中。因此，前面描述的 defined() 函数不能正常工作，我的图表线是这样的：

最后一个值被视为 0，而不是数据集中的 "blanks"。所以我的问题是：我可以像 Mike Bostock 的例子那样修改定义的函数来忽略空值吗？

这是我的折线图的全部代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.line {
  stroke-width: 2px;
  fill:none;
}

.line:hover{
  stroke:#c2c2c2;
}


</style>
<body>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var margin = {top: 20, right: 165, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);


var line = d3.line()
    .defined(function(d) { return d; })
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });


data = [{"date":1980,"value":80},{"date":1981,"value":80},{"date":1982,"value":81},{"date":1983,"value":81},{"date":1984,"value":96},{"date":1985,"value":82},{"date":1986,"value":84},{"date":1987,"value":76},{"date":1988,"value":75},{"date":1989,"value":75},{"date":1990,"value":74},{"date":1991,"value":78},{"date":1992,"value":77},{"date":1993,"value":79},{"date":1994,"value":81},{"date":1995,"value":83},{"date":1996,"value":82},{"date":1997,"value":82},{"date":1998,"value":81},{"date":1999,"value":83},{"date":2000,"value":83},{"date":2001,"value":84},{"date":2002,"value":85},{"date":2003,"value":84},{"date":2004,"value":85},{"date":2005,"value":81},{"date":2006,"value":83},{"date":2007,"value":78},{"date":2008,"value":null},{"date":2009,"value":null},{"date":2010,"value":null},{"date":2011,"value":null},{"date":2012,"value":null},{"date":2013,"value":null},{"date":2014,"value":null},{"date":2015,"value":null}]



var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");


  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, 100]);


  svg.append("path")
      .data([data])
      .attr("class", "line")
      .style("stroke", "#0F185B")
      .attr("d", line);


  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
      .selectAll("text")  
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("font-size", "0.9em")
        .attr("width","40px")
        .attr("transform", "rotate(-65)")
        .text(function(d) {return +d; });


  svg.append("g")
      .call(d3.axisLeft(y));




</script>
</body>

提前致谢！

Answer 1

将 d.value 用于您的 defined 方法：

var line = d3.line()
    .defined(function(d) {
        return d.value;
    })
    .x(function(d) {
        return x(d.date);
    })
    .y(function(d) {
        return y(d.value);
    });

这是您更新后的代码：

var margin = {
    top: 20,
    right: 165,
    bottom: 30,
    left: 50
  },
  width = 600 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);


var line = d3.line()
  .defined(function(d) {
    return d.value;
  })
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.value);
  });


data = [{
  "date": 1980,
  "value": 80
}, {
  "date": 1981,
  "value": 80
}, {
  "date": 1982,
  "value": 81
}, {
  "date": 1983,
  "value": 81
}, {
  "date": 1984,
  "value": 96
}, {
  "date": 1985,
  "value": 82
}, {
  "date": 1986,
  "value": 84
}, {
  "date": 1987,
  "value": 76
}, {
  "date": 1988,
  "value": 75
}, {
  "date": 1989,
  "value": 75
}, {
  "date": 1990,
  "value": 74
}, {
  "date": 1991,
  "value": 78
}, {
  "date": 1992,
  "value": 77
}, {
  "date": 1993,
  "value": 79
}, {
  "date": 1994,
  "value": 81
}, {
  "date": 1995,
  "value": 83
}, {
  "date": 1996,
  "value": 82
}, {
  "date": 1997,
  "value": 82
}, {
  "date": 1998,
  "value": 81
}, {
  "date": 1999,
  "value": 83
}, {
  "date": 2000,
  "value": 83
}, {
  "date": 2001,
  "value": 84
}, {
  "date": 2002,
  "value": 85
}, {
  "date": 2003,
  "value": 84
}, {
  "date": 2004,
  "value": 85
}, {
  "date": 2005,
  "value": 81
}, {
  "date": 2006,
  "value": 83
}, {
  "date": 2007,
  "value": 78
}, {
  "date": 2008,
  "value": null
}, {
  "date": 2009,
  "value": null
}, {
  "date": 2010,
  "value": null
}, {
  "date": 2011,
  "value": null
}, {
  "date": 2012,
  "value": null
}, {
  "date": 2013,
  "value": null
}, {
  "date": 2014,
  "value": null
}, {
  "date": 2015,
  "value": null
}]



var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");


x.domain(d3.extent(data, function(d) {
  return d.date;
}));
y.domain([0, 100]);


svg.append("path")
  .data([data])
  .attr("class", "line")
  .style("stroke", "#0F185B")
  .attr("d", line);


svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", ".15em")
  .attr("font-size", "0.9em")
  .attr("width", "40px")
  .attr("transform", "rotate(-65)")
  .text(function(d) {
    return +d;
  });


svg.append("g")
  .call(d3.axisLeft(y));

path {
  fill: none;
  stroke: blue;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

D3：对象内部具有空值的非连续折线图

D3 : non continuous line chart with null values inside an object

javascript

object

d3.js

linegraph