Question

我一直试图解决工具提示问题很长一段时间了。我已经搜索了Stackoverflow，我认为我的问题是我还不知道如何将现有帖子的解决方案拼凑起来。我正在制作一张d3图表，你可以在这里查看它的所有破碎的荣耀：

默认＆＃34;全球＆＃34;查看工作。当＆＃34; US＆＃34;按下按钮，数据更新正确;但工具提示没有。美国数据集中的数据点数多于默认的全局数据集。数据点的不同之处在于我缺少的工具提示的确切数量。我正在努力使用更新选择来访问输入的工具提示，我似乎无法接触它们。

下面请找到我用来生成默认视图的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

当用户点击＆＃34; US＆＃34;时，下面的代码块会正确更新我的散点图。按钮：

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>

非常感谢任何建议。

Best，Gail Z

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

我希望这会有所帮助。

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

1 个答案: