d3.js嵌套选择

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()不会执行任何操作.有关更多详细信息,请查看有关嵌套选择的教程.

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