Javascript 使用滑块更改值

我要创建的图形是一个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);

var数据=[]；
var projection=d3.geoAlbersUsa（）
.比例尺（1000）
.翻译（[宽度/2，高度/2]）；
var path=d3.geoPath（）.projection（projection）；
var color=d3.scaleLog（）.range（[d3.schemeBlues[9][0]，“Steelblue”）；
var承诺=[
d3.json（“stateborder.json”），
d3.dsv（“，”，“stateInfo.csv”，函数（d，i）{dataa=[]；
数据a.状态=d.状态；
数据a.区域=d.区域；
数据a.ten=d['2010']；
dataa.eleven=d['2011']；
数据a.12=d['2012']；
数据a.13=d['2013']；
数据a.14=d['2014']；
数据a.15=d['2015']；
data.push（dataa）；}）
]
承诺。全部（承诺）。然后（准备好）
功能就绪（[美国]）{
tip=d3.tip（）.attr（'class'，'d3 tip'）
.html（函数（d）{temp=”“；temp2=0；data.forEach（函数（i）{if（i.states==d.properties.name）{temp=i.region；temp2=i.ten；}；}）；
返回“State:+d.properties.name+”区域：+temp+“NumCrimes:+temp2+”；}）；
svg.call（tip）；
max_num=d3.max（数据，d=>d['ten']）；
域（[1，max_num]）；
svg.append（“g”）
.attr（“类别”、“状态”）
.selectAll（“路径”）
.data（topojson.feature（us，us.objects.states）.features）
.enter（）.append（“路径”）
.attr（“d”，路径）
.attr（“fill”，function（d）{temp=“black”；data.forEach（function（i）{if（i.states==d.properties.name）{temp=color（i.ten）；}；}；返回temp；}）
.on（'mouseover'，tip.show）
.on（'mouseout'，tip.hide）
svg.append（“path”）.attr（“类”、“状态边界”）
.datum（topojson.mesh（us，us.objects.states，函数（a，b）{返回a！==b；}））.attr（“d”，路径）；