我在 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 width随数据变化。很简单。
因此，使用 D3.js，我为每个数据元素附加了一个 .bar-legend-container。然后，我尝试使用容器的数据将 .bar legend-data 附加到其中。这就是它不起作用的地方。
这是确切问题的jsfiddle：http://jsfiddle.net/d72hqq0n/1/
我已经尝试了更简单的方法，例如直接附加内部元素，这有效，但没有更新数据更改。
所以，我的确切问题是：
如何附加两个与 d3 共享相同数据的嵌套元素.js ？如果数据发生变化，则进行相同的更新？
为什么我的代码不起作用？我错过了什么？
谢谢
好消息是 DOM 元素可以从其父元素继承数据。您还可以在创建嵌套元素的父元素时创建其父元素。
结果在这里：http://jsfiddle.net/d72hqq0n/5/
您对高级功能进行了一些磨合，对元素进行分组。基本上，如果您调用 container.selectAll(".bar-legend-container").selectAll(".bar-legend-data") ，则已创建一组元素作为选择的第一个元素。如果您不知道自己在做什么，这可能会弄乱数据绑定。解决方案是使用barContainer.select(".bar-legend-data")而不是selectAll。这样做只是将容器替换为选择中的条形图本身。它还从父级传播数据(append也这样做，但仅在创建柱线时！
我遇到的另一个错误是值"脉冲"在确定其新值之前粘贴结尾。这似乎是一个错误，其中800px被视为用于插值目的的800%。这个问题已经解决了，但解决方案对我们没有帮助，因为它会破坏元素并将它们重置为 0。相反，我必须到达 D3 API 之外来获取父元素的宽度，然后按此进行。
我们俩可能都掉进了兔子洞，但我在研究这个答案时学到了很多东西，所以谢谢你。希望这对您有所帮助。