Javascript d3：如何在enter（）上追加嵌套元素？“我的元素”被追加，但后续的“选择”不会看到它们

提琴样品：

这是我的更新循环：

var output = d3.select('#output')
    .selectAll('p')
    .data(data)
    ;

output
    .enter()
        .append('p')
        .call(function(parent) {
            parent.append('a')
        });
        ;

output
    .exit()
        .remove()
    ;

// PROBLEM: at this point, element addded right now isn't selected, and so it's attr and text isn't set.
output
    .select('a')
        .attr('href', function(d) { return 'http://www.google.com?q=' + d; })
        .text(function(d) { return d; })
    ;

你能帮忙吗？我知道由于一些优化，d3不会立即更新DOM，那么添加嵌套元素并在更新时设置其属性的正确方法是什么呢

---

谢谢

您没有正确使用更新、输入、退出模式

将附加您的输入选择：

output
    .enter()
        .append('p')
        .call(function(parent) {
            parent.append('a')
        });

但是，你在这里遇到了问题：

output
    .select('a')
        .attr('href', function(d) { return 'http://www.google.com?q=' + d; })
        .text(function(d) { return d; })
    ;

只有创建选择时存在的元素才会更新。因此，新创建的元素（enter选择的一部分）不受影响。这是更新选择，与输入选择相互排斥-这与v3不同，需要使用合并方法将更新选择与输入选择相结合

这就是为什么您必须使用超时-第一次运行更新函数时附加功能，第二次更新时附加功能

相反，请尝试：

output
  .enter()
    .append('p')
    .call(function(parent) { parent.append('a') })
  .merge(output).select('a')
    .attr('href', function(d) { return 'http://www.google.com?q=' + d; })
    .text(function(d) { return d; });

enter选择将导致附加ps，然后合并enter和update选择，以便使用特定文本更新所有元素。现在，您可以删除超时功能，移动滑块时，更新应正确显示

以下是更新的一个片段：

var项目=[1,2,3,4,5,6,7,8,9,10,11,12,13] 变量滑块=d3。选择“滑块” .attr'min'，0 .attr'max'，items.length .attr'value'，items.length-1 .attr'step'，1 .attr'disabled'，null//enable ; 函数更新数据{ 变量输出=d3。选择“输出” .选择All'p' .数据 ; 输出 进来 .附加“p” .callfunctionparent{ 父项。附加'a' } .mergeoutput。选择“a” .attr'href'，函数d{return'http://www.google.com?q='+d；} .textfunctiond{return d；}； ; 输出 出口 去除 ; } 更新['a'，'b'，'c']； 滑块。关于“输入”，函数{ var val=+this.value； var newData=items.0，val； 更新数据； }; 身体{ 字体系列：无衬线； } p{ 外形：1px红色固体； } a{ 显示：内联块； 轮廓：1px蓝色固体； 最小宽度：1米； 最小高度：1米； } .小{ 字体大小：66%； } 滑块{ 宽度：100%； } 静态内容

---

非常感谢。对于解决方案和SO文档的链接，这是第一个明确提到D3V4中的选择工作方式不同的地方，大多数教程都是针对v3的。太棒了，问题解决了：。再次感谢！