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以外的地方以獲取父元素的寬度，然後轉到該元素。

我們都可能跌倒了一個兔子洞，但我學到了很多研究這個答案，所以謝謝。希望這對你有幫助。