Question

我正在尝试创建<g>元素foreach数据点，并根据当前数据点向每个<text>元素添加几个不同的<g>元素。我尝试过类似的东西：

var g = vis.selectAll("g").data(dd,function(d){ return d.data.name+d.x+d.y+d.s; });

    var gs = g.enter().append("g");         
        g.exit().remove();

    var t = gs.selectAll("text").data(function(d) { console.log(d); return d; });
    t.enter().append("text").attr("x",function(d){ return d.x+d.s/2; })
        .attr("y",function(d){ return d.y+d.s/4; })
        .attr("font-family","Verdana")
        .attr("font-size","9")          
        .attr("text-anchor","middle")
        .text(function(d){ return d.data.name; });      

    t.attr("x",function(d){ return d.x+d.s/2; })
        .attr("y",function(d){ return d.y+d.s/4; })
        .attr("font-family","Verdana")
        .attr("font-size","9")          
        .attr("text-anchor","middle")
        .text(function(d){ return d.data.name; });      

    t.exit().remove();

但我得到的是一组空的<g>元素。我做了一件明显不对的事吗？

Answer 1

嵌套选择假定某种嵌套数据，例如矩阵。您的各个数据元素不是数组，因此对.data()的第二次调用不会执行任何操作。有关详细信息，请查看tutorial on nested selections。

我不清楚你为什么要在你的情况下进行嵌套选择。您正在添加一个显示数据点名称的text元素，因此您不需要第二个（嵌套）选择。然而，修复它的最简单方法（至少在语法上）应该是将dd的每个元素更改为单个元素数组。

d3.js嵌套选择

1 个答案: