Question

我在使用滑块更新d3地图时遇到问题。该演示位于http://bricbracs.com/hh/

csv文件包含2010-2013年间各3个随机状态的数据。它应该用缩放的颜色填充地图上的相应状态，其余的是黑色。但是你会发现前后移动滑块的地图没有正确更新，当只有三个状态时，它会填充多达六个状态。由于某种原因，它不会清除旧数据。

例如，即使csv文件仅包含2011年的数据，德克萨斯州也会不断变换颜色。然而，当您将滑块移动到没有数据的2009或2014时，所有状态都填充为黑色，这是正确的。

我错了什么？提前谢谢。

这是csv文件

year,state,value
2010,Georgia,460
2010,Illinois,401
2010,Montana,312
2011,Texas,202
2011,Georgia,500
2011,Montana,350
2012,New York,150
2012,Georgia,240
2012,Tennessee,500
2013,New York,100
2013,Georgia,300
2013,Illinois,75

这是最初加载数据的函数。

d3.csv("expenses.csv", function(data) {
data1=data
data = data.filter(function(d) { return d.year == yr });
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) {  
    jsonx=json  

   for (var i = 0; i < data.length; i++) {
         dataState = data[i].state;
         dataValue = parseFloat(data[i].value);

          for (var 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) {

var value = d.properties.value;                         
    if (value) {
        return color(value);
    } else {
       return "#000";

                       }
 })

     })
});

这是由滑动条调用的更新函数，它应按年过滤掉数据。

function update() {
datax=data1
datax = datax.filter(function(d) { return d.year == yr });

 datax.forEach(function(d) {   
    d.value = +d.value; 
  });
            color.domain([
            d3.min(datax, function(d) { return d.value; }),
            d3.max(datax, function(d) { return d.value })
    ]);
 for (var i = 0; i < datax.length; i++) {
         dataState = datax[i].state;
         dataValue = (datax[i].value)

          for (var j = 0; j < jsonx.features.length; j++) {
        jsonState = jsonx.features[j].properties.name;  
        if (dataState == jsonState) {
            jsonx.features[j].properties.value= dataValue;      
            break;              
        }
    }                 
                   }

svg.selectAll("path")       
     .attr("d", path)
                         .style("fill", "#000") 
    .style("fill", function(d) {                     
            var value1 = d.properties.value;
    if (value1) {
        return color(value1);
    } else {
       return "#000";
                       }
 })
 }

Answer 1

问题是您没有重置jsonx.features[j].properties.value的价值。

因此，您需要将所有jsonx.features[j].properties.value重置为undefined ，然后才能根据过滤后的数据设置值。

for (var j = 0; j < jsonx.features.length; j++) {
    jsonx.features[j].properties.value = undefined;
  }
//code for setting the value as per the filter
for (var i = 0; i < datax.length; i++) {
    dataState = datax[i].state;
    dataValue = (datax[i].value);
    for (var j = 0; j < jsonx.features.length; j++) {
      jsonState = jsonx.features[j].properties.name;
      if (dataState == jsonState) {
        jsonx.features[j].properties.value = dataValue;
        break;
      }
    }
  }

这就是您在移动滑块时在当前过滤器中看到先前过滤值的原因。

工作代码here

用滑块更新d3地图的问题

1 个答案: