D3-多年渲染'美国地图上的州数据价值

我是编程新手，我一直在学习O'Reilly交互式数据可视化一书中的示例。

现在，我正在按州对5年的电动汽车数据进行可视化。每个州的颜色都会根据特定年份注册的电动汽车数量而变化。

问题：

每次我点击下拉菜单中的year，它都会在下面创建另一个地图svg。我如何让它在同一个（现有的）地图svg上重新渲染数据？

背景：

我有定义svg维度的全局变量。我还有两个功能：

• drawMap有一个year参数，构建svg，将数据从csv加载到us_map.json，并创建所有状态边界
• clickEventMap将事件侦听器附加到每个年份按钮，然后调用drawMap函数，该函数通过与按钮上的年份匹配的年份。最后，我调用drawMap(2013)，使页面默认为2013数据，然后调用clickEventMap()

到目前为止我尝试了什么：

在d3 color.domain方法之后的I CCD_。

此外，如果在调用drawMap()时手动更改参数，则可以成功更改在现有映射上呈现的数据。

我的代码：

var w = 1200;
var h = 800;
var barpadding = 1;
var drawMap = function(year) {
  var svg = d3.select("body")
  .append("svg")
  .attr("height", h)
  .attr("width", w);
  var projection = d3.geo.albersUsa()
                         .translate([w/2, h/2]) 
                         .scale([1600]);   
  var path = d3.geo.path()
                   .projection(projection);
  var color = d3.scale.quantize()   
                    .range(["rgb(237, 248, 233)", "rgb(186, 228, 179)", "rgb(116,196,118)", "rgb(49, 163, 84)", "rgb(0, 109, 44)"]);

  color.domain([
    d3.min(data, function(d) {return d["electric_vehicles_" + year];}),
    d3.max(data, function(d) { return d["electric_vehicles_" + year];})
  ]);
  console.log(year);
  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]["electric_vehicles_" + year]);  
      for (var j = 0; j < json.features.length; j++) {   
        var jsonState = json.features[j].properties.name;
        if (dataState === jsonState) {                    
          json.features[j].properties.value = dataValue;
          break;
        }
      }
    }
    var stateView = function() {
    console.log("State clicked.");
    location.href="/states/1";  
    svg.selectAll("path")
      .data(json.features)
      .enter()
      .append("path")
      .attr("d", path)
      .style("fill", function(d) {
        var value = d.properties.value;
        if (value) {
          return color(value);
        }
        else {
          return "#ccc";
        }
      })
      .on("mouseover", function(d, i) {
        d3.select(this)
        .style("fill-opacity", 0.5);
      })
      .on("mouseout", function(d, i) {
        d3.selectAll("path")
        .style("fill-opacity", 1);
      })
      .on("click", function() {
        stateView();
      });
  });
});
};
var clickEventMap = function() {
  $("#map2013").on("click", function() {
    // var year = 2013;
    drawMap(2013);
  });
  $("#map2012").on("click", function() {
    // var year = 2012;
    drawMap(2012);
  });
  $("#map2011").on("click", function() {
    // var year = 2011;
    drawMap(2011);
  });
  $("#map2010").on("click", function() {
    // var year = 2010;
    drawMap(2010);
  });
  $("#map2009").on("click", function() {
    // var year = 2009;
    drawMap(2009);
  });
};
drawMap(2013);
clickEventMap();

感谢您的意见。

var svg = d3.select("body")
  .append("svg")
  .attr("height", h)
  .attr("width", w);

var paths = svg.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .on("mouseover", function(d, i) {
        d3.select(this)
            .style("fill-opacity", 0.5);
    })
    .on("mouseout", function(d, i) {
        d3.selectAll("path")
            .style("fill-opacity", 1);
    })
    .on("click", function() {
        stateView();
    });
paths.style("fill", function(d) {
    var value = d.properties.value;
    if (value) {
        return color(value);
    } else {
        return "#ccc";
    }
});