d3.js：如何添加數據密鑰？

我正在學習D3.js，並試圖讓我的頭在data keys與streamgraphs一起使用。我想，以適應official streamgraph example：d3.js：如何添加數據密鑰？

enter image description here

...讓每個路徑有一個明確的數據密鑰，從而使鼠標懸停日誌中的數據項。

官方的例子添加路徑如下：

var area = d3.svg.area() 
    .x(function(d) { console.log('x', d.data); return d.x * w/mx; }) 
    .y0(function(d) { return h - d.y0 * h/my; }) 
    .y1(function(d) { return h - (d.y + d.y0) * h/my; }); 
vis.selectAll("path") 
.data(data0) 
.enter().append("path") 
.style("fill", function() { return color(Math.random()); }) 
.attr("d", area);

我試圖適應的代碼如下，但我不知道如何改變data0結構（目前的數組的數組）要達到什麼我想：

vis.selectAll("path") 
.data(data0, function(d) { return d.name }) // Add key function 
.enter().append("path") 
.style("fill", function() { return color(Math.random()); }) 
.attr("d", area) 
.on("mouseover", function (d,i) { 
    console.log("mouseover", d.name); // Log name property on mouseover 
    });

因爲它的立場，我沒有作出來的data0結構的任何變化，這毫不奇怪不起作用。我怎樣才能將name屬性添加到data0而不會搞亂area和.data()函數？

更新：要更清楚一點：D3文檔說，area function is expecting a two-dimensional array。因此，如果我將data0從一個二維數組更改爲一個對象數組，每個對象都有一個name鍵和一個data鍵，我怎樣才能改變我傳遞給area的東西？

來源

2012-03-12 Richard

示例中的數據沒有「名稱」屬性，因此您需要將添加到數據以使用它。在合併/更新數據時使用您引用的數據鍵，即您已經繪製了一些路徑，然後進行更新（其中一些）。 .data()函數將嘗試找出哪些數據更新以及哪些數據是新的。如果這不適合你，你可以使用數據鍵來幫助它，也就是說，在你的情況下告訴它，具有相同名稱的東西是相同的數據。

來源

2012-03-12 18:08:35

是的，但如果我添加一個「姓名」鍵的數據（即，如果我重組它是對象的數組，而不是數組的數組），則面積函數停止工作。我怎樣才能調整面積函數呢？ – Richard 2012-03-13 10:07:41

假設你把數據數組放在數據下，那麼它會類似地變成'.attr（「d」，function（d）{return area（d.data）;}'。 – 2012-03-13 18:46:11

Ahhhh！ d未能成功，非常感謝。 – Richard 2012-03-13 22:24:35

如果數據鍵的含義是「數據傳說」，那麼你可能想看看下面的例子，我已經完全分離了幅度，圖例項目符號和圖例文本在不同區域的位置圖表。

在每個例子中，你會清楚地看到數據是如何標記，結構，傳遞，使用。

我還通過鼠標懸停和鼠標事件將它們綁定在一起，以便將鼠標懸停在任何元素上或鼠標移出任何元素都會導致集合中的所有元素同時更改顏色。

我希望這會有所幫助。

弗蘭克

來源

2012-04-19 03:57:02

d3.js：如何添加數據密鑰？

回答

相關問題