我在围绕d3.js嵌套元素缠绕时遇到了麻烦。
我试图制作一些简单的水平条形图，100％带背景（容器）。 像这样的东西： https://www.dropbox.com/s/cticjxi7e6x8ujy/Capture%20d%27%C3%A9cran%202014-12-06%2014.32.56.png?dl=0
我用这种方式描绘生成的标记：
<div class="bar-legend-container">
<div class="bar-legend-data"></div>
</div>
.bar-legend-data宽度随数据而变化。 很简单。
所以，使用D3.js，我为每个数据元素添加了一个.bar-legend-container。然后，我试图将.bar-legend-data附加到其中，使用容器的数据。那就是它不起作用的地方。
这是确切问题的一个方面： http://jsfiddle.net/d72hqq0n/1/
我尝试过更简单的方法，就像直接添加内部元素一样，但有效，但没有更新数据。
所以，我的确切问题是：
如何添加两个与d3.js共享相同数据的嵌套元素？如果数据发生变化，请进行相同的更新吗？
为什么我的代码不起作用？我错过了什么？
谢谢
答案 0 :(得分：0)
好消息是DOM元素可以从父级继承数据。您还可以在创建父元素时创建嵌套元素。
结果在这里：http://jsfiddle.net/d72hqq0n/5/
您有一个高级功能grouping elements的插件。基本上，如果你调用container.selectAll(".bar-legend-container").selectAll(".bar-legend-data")，你就创建了一组元素作为选择的第一个元素。如果您不知道自己在做什么，这可能会破坏数据绑定。解决方案是使用barContainer.select(".bar-legend-data")而不是selectAll。这样做只是用选择中的条形本身替换容器。它还传播来自父级的数据（append也会这样做，但只有在创建条形时！）。
我遇到的另一个错误是值“脉冲”在结束新值之前粘贴结束。这似乎是一个错误，800px被视为800%用于插值目的。这是在this question处理的，但解决方案对我们没有帮助，因为它会破坏元素并将它们重置为0.相反，我必须到达D3 API之外才能获取父元素的宽度，然后继续那。
我们俩都可能跌倒了一个兔子洞，但我学到了很多研究这个答案，谢谢。希望这对你有所帮助。