D3 карта подсказках

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

Когда я теперь наведите курсор мыши на одной из столиц она дает мне `Не удается прочитать свойство«CapitalName»неопределенной.

Может ли кто-нибудь мне помочь?

Answer 1

Как я уже сказал в своем комментарии,

Have you bound any data to gpoint? It doesn't look like it, so d3 isn't going to pass a datum (the d in your mousemove function). Hence the error: Cannot read property 'CapitalName' of undefined

Это, потому что вы не используете 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...             
     }); 
} 

EDIT ДЛЯ КОММЕНТАРИЕВ

Да, вам нужно преобразовать в числа. 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 
});