d3.js嵌套选择

Question

我正在尝试创建<g>元素foreach数据点，并在基于当前数据点的每个<g>元素中添加一对不同的<text>元素。我已经试过类似：

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的每个元素更改为单元素数组。