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

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>

任何建议都是非常感谢的。

最佳，盖尔Z

Answer 1

为了更清楚地看到这一点，我不得不用您所有的东西创建一个柱塞。我将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

我希望这能帮到你。