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); 

在那里发生，你应该看到正确的值出现。