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

标签 javascript object d3.js linegraph

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

为了处理空值,他使用了 Defined() 函数,如下所示:

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

然后,如果找到空值而不是对象,它将被忽略,并且图表中会出现一个洞,如下所示:

enter image description here

在此示例中,数据的格式如下:

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() 函数不能正常工作,我的图表线是这样的:

enter image description here

最后一个值被视为 0,而不是数据集中的“空白”。所以我的问题是:我可以修改定义的函数来忽略空值吗?就像 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>

提前致谢!

最佳答案

使用d.value作为您的定义方法:

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>

关于javascript - D3 : non continuous line chart with null values inside an object,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44747259/

相关文章:

javascript - 注销计时器 php/javascript

javascript - Highcharts.js 无法在光滑 slider 内工作

javascript - 在 D3 树布局中设置链接的最大长度

javascript - 将 D3 Svg 图表(即页面中的 5 个图表)导出到单个图像中

java - Android:数组循环返回空元素

javascript - D3 中的数组变换

javascript - 滚动相关的淡入和淡出文本一旦达到某个点

Javascript |集合中的唯一对象

php - 在带有类私有(private)函数的 php 中使用 usort

Java { Object a = new Object(); 之间的区别a.getVariable() } 和 { new Object().getVariable() }