1

我的条形图组合得很好。但仍有一些调整。我在正确对齐条形标签时遇到问题，并且在添加额外数据时仍然保持响应等。

所以我决定我会摆脱那些标签，而是在鼠标悬停时做一个工具提示。但我发现它没有填充正确的数据。它只为绿色条（全局）填充它。当我将鼠标悬停在蓝色（本地）栏上时，我得到了相同的工具提示，其值来自全局。

似乎它正在为整个集合而不是单个条生成工具提示。

问题 #1我如何让它为单个条生成正确的数据，而不是整个集合？

问题 #2如何在工具提示中有多个值。你会从我的 Fiddle 中看到，它目前只指定 CPC，而不是为搜索量生成数据。工具提示只能拉出一条动态数据吗？这似乎不对。

JSFiddle 在这里

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

1 回答 1

1

这两个问题的根源在于您如何设置要显示的数据。您首先选择具有特定 ID 的元素，设置文本，然后选择另一个 ID。第二次选择失败，因为具有第二个 ID 的元素不是具有第一个 ID 的元素的子元素。d3.select("#tooltip")您可以通过再次调用而不是链接调用来轻松解决此问题。也就是说，更换

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

和

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

在它发生的两个地方，您应该会看到正确的值出现。

于 2013-04-24T17:12:48.420 回答