Question

我的条形图非常好。但仍有一些调整。我有问题让条形标签正确对齐＆amp;在添加额外数据等时仍然保持响应

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

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

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

问题＃2 如何在工具提示中包含多个值。您可以从我的小提琴中看到，它目前仅指定CPC，而不是为搜索量生成数据。工具提示只能拉动一条动态数据吗？这似乎不对。

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

在它出现的两个地方都应该看到正确的值。

D3js工具提示无法正确生成

1 个答案: