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

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);
})