D3tip和堆積條形圖

我以前用StackOverflow（結果here）做了一個使用d3和d3tip的非常整潔的條形圖。這次我試圖用d3tip實現類似的東西，同時使用堆疊條形圖。我已經設法使用網絡上的示例創建堆疊條形圖，但是我無法設法得到提示（堆積條形圖here的片段）。D3tip和堆積條形圖

正如你可以在片段我已經試過這使用下面的代碼來實現，請參閱：

svg.selectAll(".g") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { 
     return x(d.Year); 
    }) 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { 
     return y(d.N); 
    }) 
    .attr("height", function(d) { 
     return height - y(d.N); 
    }) 
    .on('mouseover', tip.show) 
    .on('mouseout', tip.hide);

而此前的工作完全正常。然而由於某種原因，當我將鼠標懸停在酒吧上時，沒有任何顯示。我預計會遇到堆疊部分的一些問題，但我不明白爲什麼沒有顯示任何提示。

該提示的內容仍有待開發（我仍在辯論什麼，我想顯示），但我相信它應該至少顯示一個提示。我在這裏錯過了什麼？

來源

2016-04-25 Yoeri

您的鼠標懸停在錯誤的地方。以前它是在實際的酒吧。現在不是。如果刪除整個最後一個函數，即svg.selectAll（'。g'），則通知沒有任何反應。它實際上並沒有做任何事 – thatOneGuy

@thisOneGuy我看到它沒有做任何事情，如果我刪除代碼的這一部分（如果它？），代碼不應該中斷。我覺得錯誤在選擇器（「.g」）中，但我不確定要選擇什麼。 – Yoeri

我已經添加了答案解釋，讓我知道如果你不明白 – thatOneGuy

你的鼠標懸停在錯誤的地方。在你有條形圖之前，你現在有一個堆積的條形圖（很明顯），但回來的數據會有所不同。

例如，你的mouseover不做任何事情，因爲它被調用的地方什麼都不做。

所以我已經改變了鼠標懸停到你需要它，並記錄的數據如下：

Object {name: "Trek", y0: 43, y1: 86}

所以不是d.Year & d.N，你可以帶回的唯一數據是d.name。這是由於正在通過使堆疊帶來的數據：

data.forEach(function(d) { 
    var y0 = 0; 
    d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; }); 
    d.total = d.ages[d.ages.length - 1].y1; 
    });

所以我已經更新了你的小道消息這樣：

return "<strong>Name:</strong> <span style='color: #DA6A26'>" + d.name + "</span>"

，搬到你的鼠標懸停於行100：

.on('mouseover', function(d){ 
      console.log('mouseover'); 
      console.log(d) 
     tip.show(d); 
     }) 
     .on('mouseout', tip.hide);

我已經在那裏爲你留下了日誌，這樣你就可以看到輸出的數據。

更新plnkr：http://plnkr.co/edit/nrslJjlM37Hu5DR2ZBXw?p=preview

順便說你鏈接到css文件是錯誤的。所以，而不是css/style.css它應該只是style.css

現在鼠標懸停，你得到的名字。如果你不想要這個，那麼你需要在創建堆棧時通過正確的數據。即在這條線上：

d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });

來源

2016-04-25 12:07:11 thatOneGuy

這確實做到了這一點，謝謝指引我朝着正確的方向！ – Yoeri

D3tip和堆積條形圖

回答

相關問題