Question

我回来了另一个d3.js问题。我有一个等值区域地图，我想要一个工具提示，它向我展示鼠标悬停功能的社区正确价值。它的工作接近完美，只有一个问题，没有“更新”的价值。在每个县都是一样的。我希望有人能给我一个答案。谢谢。

这是我的代码段：

var feature = group.selectAll("path")
    .data(collection.features)
    .enter()
    .append("path")
    //.transition()
    //.duration(9000)
    .attr("fill",function(d) {

        //Get data value
        var value = d.properties.EINWOHNER;
        //console.log(value);

        if (value) {
                //If value exists…
                return color(value);
        } 
        else {
                //If value is undefined…
                return "none";
        }
    })

    .on("mouseover", function(d) {

        d3.select("#tooltip")
            .data(collection.features)
            .select("#value")
            .text(function(d){
                return d.properties.EINWOHNER;
            });

        //Show the tooltip
        d3.select("#tooltip").classed("hidden", false);
    })

    .on("mouseout", function() {

        //Hide the tooltip
        d3.select("#tooltip").classed("hidden", true);                        
    });

Answer 1

要设置文字，请使用

.text(d.properties.EINWOHNER);

您当前正从每个绑定到#value DOM元素的数据中获取值。您也不需要在那里传递数据 - 您已经拥有d中的当前数据。所以完整的代码看起来像这样。

.on("mouseover", function(d) {
    d3.select("#tooltip")
      .text(d.properties.EINWOHNER);
    d3.select("#tooltip").classed("hidden", false);
})

D3.js工具提示中没有值更新

1 个答案: