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

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

默认的“全局”视图有效。当按下“US”按钮时，数据正确更新；但是工具提示没有。美国数据集中的数据点比默认全局数据集中的多。数据点的不同之处在于我缺少的工具提示的确切数量。我正在努力使用更新选择来访问输入的工具提示，我似乎无法访问它们

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

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

但是，当我尝试使用相同的格式更新美国选择的工具提示时，什么都没有发生。我还不了解足够的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>

品牌：名称

零钱：100

分数：100

非常感谢您的建议

最好的是，盖尔Z，为了更清楚地看到这一点，我必须用你所有的东西创建一个。我考虑了

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

---

我希望这能有所帮助。

太棒了！非常感谢你！这很有道理。你把那些乱七八糟的东西放到一个单独的函数中，然后在我进入新的圈子时调用它。

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

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