使用D3连接数据并在地图中弹出

Question

我试图连接数据到地图和弹出鼠标悬停。我只使用数据集中的3-4行进行测试。

http://jsfiddle.net/2emnt8m3/1/

以下是：

    d3.select("body").selectAll("path").each(function(d,i){
    state_id = d3.select(this.parentNode).attr("entity_id");
    title = d3.select(this).attr("title");
    }); 

当鼠标悬停在州或联邦领土上时，就会弹出犯罪数据。

以下是我在json/js http://pastebin.com/mZ6zc5CB中收集的完整数据集

Answer 1

为了便于查找，我将您的数据转换为d3.map，然后通过悬停元素的id提取数据：

var m = d3.map(data, function(d) { return d.STATEUTS.toUpperCase(); }); 
var el=d3.select("body").selectAll("path")
.on("mouseover", function(d) {  
    var id = d3.select(this).attr('id');
    if (m.has(id)){      
        var d = m.get(id);
        //Display of Data on mouse hover        
        div.transition().duration(100).style("opacity", .75);      
        div.html( "<bold><br/>"+ d.STATEUTS +"</bold><br/>"+"<br/>"
            +"Assault : "+ d.Assault +"<br/>"
            +"Cruelty : "+ d.Cruelty +"<br/>"
            +"Dowry Death : "+ d.Dowry +"<br/>"
            +"Dowry Act : "+ d.Prohibition +"<br/>"
            +"Immoral : "+ d.Immoral +"<br/>"
            +"Importation of girl : "+ d.Importation +"<br/>"
            +"Insult : "+ d.Insult +"<br/>"
            +"Kidnapping,Abduction : "+ d.Kidnapping +"<br/>"
            +"Rape : "+ d.Rape +"<br/>"
            +"Total : "+ d.Total +"<br/>"
        )
        .style("left",(d3.event.pageX-50) + "px")
        .style("top", (d3.event.pageY-132) + "px");  
    }
})

更新的小提琴。