使用 d3 输入方法更新数据后添加工具提示元素

Question

我一直在尝试解决工具提示问题已有一段时间了。我已经搜索了Stackoverflow，我认为我的问题是我还没有足够的知识来从现有帖子中拼凑出解决方案。 我正在制作一个 d3 图表，你可以在这里查看它的所有破碎荣耀：

链接到破碎的图表。

默认的"全局"视图有效。按下"US"按钮时，数据正确更新;但工具提示没有。美国数据集中的数据点多于默认全局数据集。数据点的差异是我缺少的工具提示的确切数量。我正在努力使用更新选择来访问输入的工具提示，我似乎无法获得它们。

请在下面找到我用来生成默认视图的 d3 代码（到目前为止这对我有用）：

d3.tsv("data/global.tsv", function(error, data) {
        data.forEach(function(d){
        d.change = +d.change;
        d.score = +d.score;
});

//Create circles            
svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return xScale(d.change);
    })
    .attr("cy", function(d){
        return yScale(d.score); 
    })
    .attr("r", 7)
    .attr("class","chart")
    .style("opacity",.8)
    .style("fill", function(d) {
        return d.code;
    })
    .on("mouseover", function(d) {
        var xPosition = parseFloat(d3.select(this).attr("cx"));
        var yPosition = parseFloat(d3.select(this).attr("cy"));
        //Update the tooltip position and value
        d3.select("#tooltip")
            .style("left", xPosition + "px")
            .style("top", yPosition + "px")
            .select("#brand")
            .style("color", d3.select(this).style("fill"))
            .text(d.brand);
        d3.select("#tooltip")
            .select("#change")
            .text(d.change);
        d3.select("#tooltip")
            .select("#score")
            .text(d.score);
        //Show the tooltip
        d3.select("#tooltip").classed("hidden", false);     //quickly apply or remove classes from an element
        })
    .on("mouseout", function() {
        //Hide the tooltip
        d3.select("#tooltip").classed("hidden", true);  //quickly apply or remove classes from an element
        })  
}); //this ends the code on the selected svg element

当用户单击"US"按钮时，下面的代码块会正确更新我的散点图：

d3.selectAll("#us_data").on("click", function() {
    d3.tsv("data/us.tsv", function(error, data) {
        data.forEach(function(d) {
            d.change = +d.change;
            d.score = +d.score;
    });
    var circles = svg.selectAll("circle")
        .data(data);

    circles.enter()
        .append("circle")   
        .attr("cx", function(d) { return xScale(d.change); })
        .attr("cy", function(d){ return yScale(d.score); })
        .attr("r", 7)
        .attr("class","chart")
        .style("opacity",.8)
        .style("fill", function(d) { return d.code; });
    circles.transition()
        .duration(500)
        .attr("cx", function(d) { return xScale(d.change); })
        .attr("cy", function(d){ return yScale(d.score); })
        .attr("r", 7)
        .attr("class","chart")
        .style("opacity",.8)
        .style("fill", function(d) { return d.code; });

但是，当我尝试使用相同的格式来更新美国选择的工具提示时，没有任何反应。我还不了解足够的 JavaScript（或 d3）来远离现有的约定......所以我相信这就是我跌倒的地方。

    var labels = d3.selectAll("#tooltip")
        .data(data);

    labels.enter()
        .append("#tooltip")
        .select("#brand")
        .style("color", d3.select(this).style("fill"))
        .text(d.brand);
    labels.transition()
        .duration(500)
        .select("#brand")
        .style("color", d3.select(this).style("fill"))
        .text(d.brand);

    labels.enter()
        .append("#tooltip")
        .select("#change")
        .text(d.change);
    labels.transition() 
        .duration(500)
        .select("#change")
        .text(d.change);
    labels.enter()
        .append("#tooltip")
        .select("#score")
        .text(d.score); 

我正在使用以下代码在我的 html 页面上创建工具提示：

    <div id="tooltip" class="hidden">
        <p>Brand: <strong><span id="brand">name</span></strong></p>
        <p>Change: <span id="change">100</span></p>
        <p>Score: <span id="score">100</span></p>
    </div>

任何建议将不胜感激。

贝斯特，盖尔·

Answer 1

为了更清楚地看到这一点，我必须用你所有的东西创建一个 plunker。我分解了mouseover和mouseout功能，以便在美国圈子中重复使用它们。以下是更改的代码：

circles.enter()
    .append("circle")   
    .attr("cx", function(d) { return xScale(d.change); })
    .attr("cy", function(d){ return yScale(d.score); })
    .attr("r", 7)
    .attr("class","chart")
    .style("opacity",.8)
    .style("fill", function(d) { return d.code; })
    .on("mouseover", mouseover) // added
    .on("mouseout", mouseout); // added

我希望这有所帮助。