javascript - 在 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; }).

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

Answer 2

最简单的选择是从传入的数据中过滤掉空值.data(…)，扩充数据以维护索引：

svg.selectAll('circle')
  .data(values
    .map(function(v, idx) { return v == null? null : { idx: idx, value: v })
    .filter(function(v) { return v != null })
  )
  .enter()
    .append('circle')
    .attr('fill', '#c00')
    .attr('r', 3)
    .attr('cx', function(d) { return d.idx * 10 }) // or whatever
    .attr('cy', function(d) { return d.value.y }) // or whatever

请注意，您也可以遵循此模式的单个子元素，即使它们不是自然列表。例如，考虑您想要有条件地添加第二个圆圈的情况：

var circles = [
    { color: 'red', cx: 30, cy: 30, subCircleColor: 'blue' },
    { color: 'blue', cx: 60, cy: 60, subCircleColor: 'green' },
    { color: 'green', cx: 90, cy: 90 },
];

// Create a group which will hold the circles, since the result will
// be:
//    <g class="circles">
//      <circle color="{{ color }}" ... />
//      <circle class="sub-circle" color="{{ subCircleColor }}" ... />
//    </g>
var circlesGroups = svg.selectAll("g.circles")
    .data(circles)
    .enter()
        .append("g").attr({"class": "circles"})

// Add the first circle to the group
circlesGroups
    .append("circle").attr({
        "fill": function(d) { return d.color },
        "r": 20,
        "cx": function(d) { return d.cx },
        "cy": function(d) { return d.cy },
    })

// If there is a subCircleColor, add the second circle to the group
circlesGroups.selectAll("circle.sub-circle")
    .data(function(d) {
        if (d.subCircleColor)
            return [d];
        return [];
    })
    .enter()
        .append("circle").attr({
            "class": "sub-circle",
            "fill": function(d) { return d.subCircleColor; },
            "r": 10,
            "cx": function(d) { return d.cx },
            "cy": function(d) { return d.cy },
        })

小提琴：http: //jsfiddle.net/3d6e648k/

Answer 3

试试这个模式，它可以删除或隐藏你的圈子。

// Step 1: hides all circles which are "null"
d3.selectAll(".yourItem")
.data(data)
.enter()
    .append("circle")
    .attr("visibility", function(d,i){
        if(yourFunction(d) == null) return "hidden";
})

// Step 2: optional, deletes all circles which are "hidden"
d3.selectAll("circle[visibility=hidden]").remove();

Answer 4

如果您不想一开始就附加它，这是一种方法。我在 .each() 中使用了 if 语句，然后使用 d3.select(this) 将其附加到当前项目。

var data = [9, 0, 7, 0, 5, 0, 3, 0, 1];

var svg = d3.select('#svg').append('svg').attr({'viewBox': '-10 -10 99 20'});

svg.selectAll('g').data(data).enter().append('g').each(function (d,i) {
 if(d){
  d3.select(this).append('circle').attr({r:5,cx:(i*9)});
 }else{
  d3.select(this).remove();
 }
});

这是一个 bin http://jsbin.com/qojifug/edit?js,output

Answer 5

只是过滤它。

values.filter(function(el){return el !== null;})