D3js工具提示沒有正確生成

Question

我的條形圖非常好。但是仍然有一些調整。我遇到了問題，使條形碼標籤正確對齊&對於何時添加額外數據仍然保持響應。

因此，我決定刪除這些標籤，然後對鼠標懸停進行工具提示。但是我發現它沒有填充正確的數據。它只填充綠條（全局）。當我將鼠標懸停在藍色（本地）欄上時，我會得到與全局值相同的工具提示。

似乎它正在爲整個集合生成工具提示，而不是單個工具欄。

問題＃1如何讓它爲單個欄而不是整個組生成正確的數據？

問題＃2如何在工具提示中有多個值。您將從我的小提琴中看到，它目前僅指定每次點擊費用，並且不會爲搜索量生成數據。工具提示只能提取一條動態數據嗎？這看起來不正確。

JSFiddle is Here

sets.append("rect") 
    .attr("class","local") 
.attr("width", xScale.rangeBand()/2) 
.attr("y", function(d) { 
    return yScale(d.local); 
}) 
    .attr("x", xScale.rangeBand()/2) 
    .attr("height", function(d){ 
    return h - yScale(d.local); 
    }) 
.attr("fill", colors[0][1]) 
.on("mouseover", function(d,i) { 
    //Get this bar's x/y values, then augment for the tooltip 
    var xPosition = parseFloat(xScale(i) + xScale.rangeBand()); 
    var yPosition = h/2; 
    //Update Tooltip Position & value 
    d3.select("#tooltip") 
     .style("left", xPosition + "px") 
     .style("top", yPosition + "px") 
     .select("#cpcVal") 
     .text(d.cpc) 
     .select("#volVal") 
     .text(d.local); 
    d3.select("#tooltip").classed("hidden", false); 
}) 
.on("mouseout", function() { 
    //Remove the tooltip 
    d3.select("#tooltip").classed("hidden", true); 
}) 
; 

sets.append("rect") 
    .attr("class","global") 
.attr("width", xScale.rangeBand()/2) 
.attr("y", function(d) { 
    return yScale(d.global); 
}) 
    .attr("height", function(d){ 
    return h - yScale(d.global); 
    }) 
.attr("fill", colors[1][1]) 
.on("mouseover", function(d,i) { 
    //Get this bar's x/y values, then augment for the tooltip 
    var xPosition = parseFloat(xScale(i) + xScale.rangeBand()); 
    var yPosition = h/2; 
    //Update Tooltip Position & value 
    d3.select("#tooltip") 
     .style("left", xPosition + "px") 
     .style("top", yPosition + "px") 
     .select("#cpcVal") 
     .text(d.cpc) 
     .select("#volVal") 
     .text(d.global); 
    d3.select("#tooltip").classed("hidden", false); 
}) 
.on("mouseout", function() { 
    //Remove the tooltip 
    d3.select("#tooltip").classed("hidden", true); 
}) 
; 

Answer 1

您的兩個問題的來源是你如何設置要顯示的數據。您首先選擇一個具有特定ID的元素，設置文本，然後選擇另一個ID。第二個選擇失敗，因爲具有第二個ID的元素不是具有第一個ID的元素的子元素。您可以通過再次致電d3.select("#tooltip")而不是將呼叫鏈接來解決此問題。也就是說，在這兩個地方與

d3.select("#tooltip") 
    .style("left", xPosition + "px") 
    .style("top", yPosition + "px") 
    .select("#cpcVal") 
    .text(d.cpc); 
d3.select("#tooltip") 
    .select("#volVal") 
    .text(d.local); 

更換

d3.select("#tooltip") 
    .style("left", xPosition + "px") 
    .style("top", yPosition + "px") 
    .select("#cpcVal") 
    .text(d.cpc) 
    .select("#volVal") 
    .text(d.local); 

在那裏發生，你應該看到正確的值出現。