D3.js共享相同数据的嵌套项目

Question

我在绕过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-传奇数据宽度的数据变化。 很简单。

因此，使用D3.js，我为每个数据元素添加了一个.bar-legend-container。然后，我尝试使用容器的数据添加.bar-legend-data内部。这就是它不起作用的地方。

这里是确切的问题进行的jsfiddle： http://jsfiddle.net/d72hqq0n/1/

我试着更简单的方法来做到这一点，像是刚追加内部元件直线距离，它的工作，但对数据没有更新更改。

所以，我确切的问题是：

• 我如何可以追加两个嵌套的元素与d3.js共享相同的数据？如果数据发生变化，同时更新？

• 为什么我的代码不工作？我错过了什么？

谢谢

Answer 1

的好消息是，DOM元素可以从他们的父母继承的数据。您也可以在创建其父项时创建嵌套元素。

其结果是在这里：http://jsfiddle.net/d72hqq0n/5/

你有一点磨合与一个先进的功能，grouping elements。基本上，如果你打电话给container.selectAll(".bar-legend-container").selectAll(".bar-legend-data")，你已经创建了一组元素作为选择的第一个元素。如果你不知道你在做什么，这可能会搞乱数据绑定。解决方案是使用barContainer.select(".bar-legend-data")而不是selectAll。这样做只是在选择中用容器本身替换容器。它也会传播来自父级的数据（append也这样做，但只有在创建条形图时才会这样做！）。

我遇到的另一个bug是在定位新值之前，“pulse”值粘贴结束。这似乎是一个错误，其中800px被视为800%用于插值目的。这是在this question解决，但该解决方案并没有帮助我们，因为它破坏了元素并将它们重置为0.相反，我必须到达D3 API以外的地方以获取父元素的宽度，然后转到该元素。

我们都可能跌倒了一个兔子洞，但我学到了很多研究这个答案，所以谢谢。希望这对你有帮助。