使用滑块更改值

Question

我要创建的图形是一个Choropleth映射，必须具有一个滑块才能显示不同年份的数据。

如果我输入年份列，则可以获取特定年份的数据。

下面的示例显示的图表仅获取2010年的犯罪数据（函数中为“ i.ten”，max_num为d ['ten']

如何插入滑块，以便使用不同的列名来更新数据？

var data = [];

var projection = d3.geoAlbersUsa()
    .scale(1000)
    .translate([width / 2, height / 2]);

var path = d3.geoPath().projection(projection);

var color = d3.scaleLog().range([d3.schemeBlues[9][0], "Steelblue"]);

var promises = [
  d3.json("stateborder.json"),
  d3.dsv(",", "stateInfo.csv", function(d, i) {dataa = []; 
  dataa.states = d.States; 
  dataa.region = d.Region; 
  dataa.ten = d['2010']; 
  dataa.eleven = d['2011'];
  dataa.twelve = d['2012']; 
  dataa.thirteen = d['2013']; 
  dataa.fourteen = d['2014']; 
  dataa.fifteen = d['2015']; 
  data.push(dataa);})
]

Promise.all(promises).then(ready)

function ready([us]) {
    tip = d3.tip().attr('class', 'd3-tip')
        .html(function(d) {temp = ""; temp2 = 0; data.forEach(function(i) {if (i.states == d.properties.name) {temp = i.region; temp2 = i.ten;};}); 
        return "<div>State: " + d.properties.name + "</div><div>Region: " + temp + "</div><div>NumCrimes: " + temp2 + "</div>"; });
    svg.call(tip);

    max_num = d3.max(data, d => d['ten']);
    color.domain([1, max_num]);

    svg.append("g")
    .attr("class", "states")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
    .attr("d", path)
    .attr("fill", function(d) {temp = "black"; data.forEach(function(i) {if (i.states == d.properties.name) {temp = color(i.ten);};}); return temp;})
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)

    svg.append("path").attr("class", "state-borders")
    .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })).attr("d", path);