Question

我尝试使用D3世界地图并使用此示例构建：http://techslides.com/demos/d3/worldmap-template.html

现在，我希望获得一个类似于国家的工具提示（即突出显示和显示名称），用于绘制到地图上的城市。

到目前为止，我已粘贴并略微更改了country-tooltip的代码，并尝试将其连接到csv的城市日期。这是代码的后半部分，带有原始注释和我的复制粘贴：

//function to add points and text to the map (used in plotting capitals)
function addpoint(lat,lon,text) {
    var gpoint = g.append("g").attr("class", "gpoint");
    var x = projection([lat,lon])[0];
    var y = projection([lat,lon])[1];

    gpoint.append("svg:circle")
        .attr("cx", x)
        .attr("cy", y)
        .attr("class","point")
        .attr("r", 1.5);

    //conditional in case a point has no associated text
    if(text.length>0){
        gpoint.append("text")       
            .attr("x", x+2)
            .attr("y", y+2)
            .attr("class","text")       
            .text(text);
    }


gpoint

    .on("mousemove", function(d,i) {


        var mouses = d3.mouse(svg.node())
            .map( function(d) { return parseInt(d); } );

        tooltip.classed("hidden", false)
            .attr("style", "left:"+(mouses[0])+"px;top:"+(mouses[1])+"px")  
            .html(d.CapitalName);                                                       
    })


    .on("mouseout",  function(d,i) {
        tooltip.classed("hidden", true);
    });

当我现在徘徊在其中一个首都时，它给了我“看不到属性＆#39; CapitalName＆＃39;未定义的。

任何人都可以帮助我吗？

Answer 1

正如我在评论中所说，

您是否将任何数据绑定到gpoint？它看起来不像，所以d3 是不是要传递一个数据（你的mousemove函数中的d）。于是错误：无法读取属性＆＃39; CapitalName＆＃39;未定义的

这是因为您没有使用d3数据绑定。如果我正确地阅读您的代码，您正在执行以下操作：

var myDat = [{lat: 34, lon: 39, CapitalName: "akdjf"}, etc...]
for (var i = 0; i < myDat.length; i++){
   addpoint(myDat[i].lat,myDat[i].lon,myDat[i].CapitalName);
}

d3但是，希望您的数据绑定，然后在内部循环。这样的事情（完全未经测试但希望你能得到这个想法）：

d3.csv("data/country-capitals.csv", function(err, capitals) { 

    var gpoint = g.selectAll('.gpoint')
      .data(capitals) //<-- bind your data
      .enter() //<-- enter selection
      .append("g")
      .attr("class", "gpoint");

    gpoint.append("circle")
      .attr("cx", function(d, i){
        return projection([d.lat,d.lon])[0]; //<-- bound data and d is passed in...
      }).attr("cy", function(d, i){
        return projection([d.lat,d.lon])[1];
      });

    gpoint.on("mousemove", function(d,i) {
        var coors = d3.mouse(this);
        tooltip.classed("hidden", false)
          .attr("style", "left:"+(coors.x)+"px;top:"+(coors.y)+"px")  //<- use d3.mosue to get position
          .html(d.CapitalName);  //<-- bound data d is passed...                                                   
        });
}

编辑评论

是的，您需要转换为数字。 d3为其提供handy callback：

d3.csv("data/country-capitals.csv", function(d) {
  return {
    CapitalLongitude = +d.CapitalLongitude,
    CapitalLatitude = +d.CapitalLatitude,
    CapitalName = d.CapitalName
  };
}, function(error, capitals) {
   // rest of code here
});

D3地图工具提示

1 个答案: