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

Question

我正在尝试将数据连接到地图并在鼠标悬停时弹出。我只使用数据集中的 3-4 行进行测试..

这里是：

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

已更新 fiddle。

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

Connecting data and pop up in the map using D3

javascript

jquery

d3.js