如何將註釋數組添加到d3條形圖？

我已經設法通過讀取CSV數據，然後使用d3.nest()將每年的數據分組爲每年的數據來繪製條形圖（這是我知道的:)），請參見塊here或blockbuilder here。但是我現在正試圖從我的annotations數組中添加筆記到每個圖表，並且我被卡住了。如何將註釋數組添加到d3條形圖？

我想要的一種方法是selectAll(".charts")並附加我的嵌套註釋數組，即annotationsPerYear。但是我發現很難將我的annotationsPerYear鍵與我的圖表結合起來，然後迭代並將每年的筆記附加到正確的圖表上。有任何想法嗎？

來源

2016-04-07 eoin

你可以依靠嵌套選擇。您已使用此位的嵌套選擇：

svg.selectAll(".bar") 
    .data(function(d) {return d.values;})

上面將不同的數據綁定到前面創建的3個SVG中的每一個。它通過調用function(d) 3次來完成此操作，並且每次都返回一個不同的d.values。

你可以做一個類似的事情來綁定並在每個SVG中創建一組不同的註釋。您需要一個函數（傳遞給data()），該函數返回每個圖表適用的註釋，但是這次您沒有預先計算的東西，如d.values。相反，你必須提取適用的批註出annotations陣列，採用filter()：

svg.selectAll(".annotation") 
    .data(function(d) { 
    // return annotations whose key matches d's key 
    return annotations.filter(function(a) { return a.key == d.key; }); 
    })

然後你可以使用enter()和append()爲你做了條創建文本，並將其定位。我不知道你打算如何打好出來，但完全你想是這樣的：

svg.selectAll(".annotation") 
    .data(function(d) { 
    return annotations.filter(function(a) { return a.key == d.key; }); 
    }) 
.enter() 
    .append("text") 
    .attr("class", "annotation") 
    .attr("x", function(d) { return x(d.xPos); }) 
    .attr("y", function(d) { return d.yPos; }) 
    .text(function(d) { return d.note; })

參見：

來源

2016-04-07 17:57:54 meetamit

這是完美的，謝謝。是的，這就是我一旦將鑰匙匹配起來後我將如何佈置它。現在我已經注意到閏年的一個單獨問題，例如2016年的數據包括2月29日。我猜這可以解決我設置x.domain的地方？或者我應該在這裏發佈一個新問題？ – eoin

是的，這是一個單獨的，不平凡的問題，可能值得自己的職位。是的，它應該通過x尺度來解決，或者通過切換到時間尺度或者確保順序尺度的域包含第29個域。前者是複雜的（因爲定位/調整酒吧的大小會變得更加複雜），後者意味着每年都會出現第29位（在非閏年沒有酒吧）。所以這取決於你想要達到的目標。 – meetamit

如何將註釋數組添加到d3條形圖？

回答

相關問題