在模仿传奇之后突出显示地图上的数据

时间:2015-09-27 18:23:30

标签: d3.js

D3新手在这里。我正在尝试在地图上定位路径元素。当我将鼠标悬停在图例上时,我希望突出显示地图上的相应数据。 像这样。 https://vida.io/documents/jspBB83bm6EvEYE3n

这是我到目前为止所拥有的 http://bricbracs.com/map/

我已设法在鼠标悬停时定位图例中的单元格。以下是legend.js代码中的相关代码。

  .on("mouseover", function(d,i) {
   var chosen = d.color;
     console.log(chosen)
      d3.select(this).style("fill", "blue"); 
        })   

以下是脚本中的相关代码。

d3.csv("expenses.csv", function(data) {
data = data.filter(function(d) { return d.year == 2014 });
   data.forEach(function(d) {   
    d.value = +d.value; 
  });
        color.domain([
        d3.min(data, function(d) { return d.value; }),
        d3.max(data, function(d) { return d.value })

  ]);

 d3.json("us-states.json", function(json) { 
    for (var i = 0; i < data.length; i++) {
     var dataState = data[i].state;
     var dataValue = parseFloat(data[i].value);

      for (j = 0; j < json.features.length; j++) {
   jsonState = json.features[j].properties.name;    
    if (dataState == jsonState) {
        json.features[j].properties.value = dataValue;      
        break;              
    }
   }       
 }
 svg.selectAll("path")
  .data(json.features)
  .enter()
  .append("path") 
  .attr("d", path)
  .style("stroke","#ccc")
  .style("fill", function(d) {
    value = d.properties.value;                            
             if (value) {
               return color(d.properties.value)
             } else {
              return "#000"
             }
    })

  });

实现这一目标的最佳方法是什么。提前谢谢。

0 个答案:

没有答案