在d3.js中,跳过对空数据的append()

Question

我用小圆子弹绘制线图.但是,数据中有漏洞,在我的数组中由null表示.当然,只要没有数据,就不应该有圈子.但是d3的append()方法无论如何都会添加它们.我该如何避免这种情况？

这是一个jsFiddle模型完全重现我的问题.

我感兴趣的是没有那个系列的圆圈位于我的图形的X轴上,因为它们都是空的.

来自jsfiddle链接的相关代码:

svg.selectAll('circle').data(values).enter()
  .append('circle')// <-- I don't want to do this for null's
  .attr('fill', '#c00')
  .attr('r', 3)
  .attr('cx', xi)
  .attr('cy', yFlipped)

Answer 1

一种选择是以不同方式表示您的数据,以便您不依赖于索引来计算x坐标.例如,如果您将每个数据表示为对象(例如{x: 0, y: 0.2840042}),那么您可以计算x坐标x(d.x)而不是x(i).

另一种选择是当值为null时将半径设置为零,因此隐藏圆圈:circle.attr("r", function(d) { return d == null ? 0 : 3; }).或者,你可以隐藏圈子:circle.style("display", function(d) { return d == null ? "none" : null; }).

您还可以在追加它们后删除null元素:circle.filter(function(d) { return d == null; }).remove().这适用于初始创建,但我不推荐它,因为如果您稍后重新选择元素,索引将会改变.