Javascript 在ver4中选择子节点，如何选择？

我将我的应用程序从d3-ver3升级到d3-ver4

代码版本3和版本4-注释版本3和取消注释版本4：

变量节点=[{ id:n11， 名称：节点1， x:169， y:110 }, { id:n12， 名称：节点2， x:93， y:14 }, { id:n13， 名称：节点3， x:42， y:65 }]; var svg=d3.selectbody.appendsvg； var classesG=svg.appendg.classedclasses，true； var classes=classesG.selectAllg.datanodes； var newClass=classes.enter.appendg； newClass.appendrect； 新阶级 .attrid，函数{ 返回d.id } .classednode，true .attr转换，函数{ 返回translate+d.x+，+d.y+； }; console.logclasses.selectrect； classes.selectrect .attr高度、功能、i{ 返回20； } .attrwidth，functionad，i{ 返回20； }; .节点{ 填充：ccc； 中风：000； 笔划宽度：1.5px； } -> 在d3.v4中，当表示更新选择ie时，案例类中的现有元素为空

调用classes.selectrect时，classes为空，因此选择正确为nothing

没有上下文，我不能说你的正确答案是什么，有两种选择

您希望每次都更新新节点和现有节点，在这种情况下，您希望两个集的并集

类。输入。合并类。选择AllRect.attr

您只需要在新节点上设置rect ATTR，这样您就可以

newClass.appendrect.attr

这一点在本手册中有详细说明

变量节点=[{ id:n11， 名称：节点1， x:169， y:110 }, { id:n12， 名称：节点2， x:93， y:14 }, { id:n13， 名称：节点3， x:42， y:65 }]; var svg=d3.selectbody.appendsvg； var classesG=svg.appendg.classedclasses，true； var classes=classesG.selectAllg.datanodes； var newClass=classes.enter.appendg； newClass.appendrect； 新阶级 .attrid，函数{ 返回d.id } .classednode，true .attr转换，函数{ 返回translate+d.x+，+d.y+； }; console.logclasses.selectrect； classes.enter.mergeclasses.selectAllrect .attr高度、功能、i{ 返回20； } .attrwidth，functionad，i{ 返回20； }; .节点{ 填充：ccc； 中风：000； 笔划宽度：1.5px； } 在第4版的代码中，我没有得到HTMLRECT对象。为什么?

使用D34.x看到的行为是正确的

发生的事情是，D3的创造者迈克·博斯托克（Mike Bostock）在D3 v2中介绍了一种魔法，这种魔法在D3 v3中得到了证实。执行此操作时：

var classes = classesG.selectAll("g").data(nodes);

您有一个数据绑定选择。如果在该阶段使用console.logJSON.StringifyClass，您将获得：

[
    [null, null, null]
]

现在魔法来了：如果你做到了：

var newClass = classes.enter().append("g");
newClass.append("rect");

您将神奇地更改变量类。您可以通过console.logJSON.stringifyclasses的新结果轻松地看到它：

因此，数据绑定选择之后的enter.append修改了它

如何修复我的代码

您可以合并选择。但是，有一个更简单的解决方案：只要改变：

classes.select("rect")
    .attr("height", function(d, i) {
        return 20;
    })
    .attr("width", function(d, i) {
        return 20;
    });

致：

下面是一个演示：

变量节点=[{ id:n11， 名称：节点1， x:169， y:110 }, { id:n12， 名称：节点2， x:93， y:14 }, { id:n13， 名称：节点3， x:42， y:65 }]; var svg=d3.selectbody.appendsvg； var classesG=svg.appendg.classedclasses，true； var classes=classesG.selectAllg.datanodes； var newClass=classes.enter.appendg； newClass.appendrect； 新阶级 .attrid，函数{ 返回d.id } .classednode，true .attr转换，函数{ 返回translate+d.x+，+d.y+； }; newClass.selectrect .attr高度、功能、i{ 返回20； } .attrwidth，functionad，i{ 返回20； }; .节点{ 填充：ccc； 中风：000； 笔划宽度：1.5px； }

classes.select("rect")
    .attr("height", function(d, i) {
        return 20;
    })
    .attr("width", function(d, i) {
        return 20;
    });

newClass.select("rect")
    .attr("height", function(d, i) {
        return 20;
    })
    .attr("width", function(d, i) {
        return 20;
    });