D3地图数据标签未正确显示

时间:2016-10-26 15:18:56

标签: javascript d3.js

我正在尝试显示一张地图,当它悬停在地图上时会显示状态名称和数据绑定到我的数据对象指定的状态。

Codepen:http://codepen.io/jacob_johnson/pen/ORqwEL?editors=1010

我的问题是在状态名称文本之后正确显示数据 - 我只是得到一个未定义的变量。数据根本没有显示。我不知道如何正确获取数据,因为我认为这种方法可行。以下是调用数据的方式:

... AT LINE 353 of CODEPEN LINK
.on("mousemove", function(d) {
        var html = "";

        html += "<div class=\"tooltip_kv\">";
        html += "<span class=\"tooltip_key\">";
        html += id_name_map[d.id];
        html += "</span>";
        html += "<span class=\"tooltip_value\">";
        html += valueById.get(d.id);
        html += "";
        html += "</span>";
        html += "</div>";

        $("#tooltip-container").html(html);
        $(this).attr("fill-opacity", "0.8");
        $("#tooltip-container").show(); ...

我不明白为什么它显示未定义。任何帮助将不胜感激。

感谢。

1 个答案:

答案 0 :(得分:2)

您没有正确访问数据的属性。

data.forEach(function(d) {
  // d doesn't have the properties MAP_STATE and MAP_VALUE
  var id = name_id_map[d[MAP_STATE]];  // change to d[0][0]
  valueById.set(id, +d[MAP_VALUE]);  // change to d[1][1]
});

也改变量化方法。这应该可以解决你的问题