D3数据不通过onclick功能更新

Question

我使用D3构建了一个彩色编码地图，并希望下一步允许用户通过点击年份按钮按年查看数据。我已经为每个按钮附加了一个onclick函数，这个函数更新了我的displayYear变量。我扔了一个console.log来确保这个变量正确更新，确实如此。但是，出于某种原因，我的地图永远不会更新，无论点击什么，它都保持其初始值。我的HTML和Javascript / D3代码如下：

相关HTML：

<button onclick="setYear(0)">2009</button>
<button onclick="setYear(1)">2010</button>
<button onclick="setYear(2)">2011</button>
<button onclick="setYear(3)">2012</button>
<button onclick="setYear(4)">2013</button>
<button onclick="setYear(5)">2014</button>

相关的JS：

//Bind premium and map data and create one path per mapData feature

var displayYear = 0;
function setYear(index) {
    displayYear = index;
    console.log(displayYear);
}           

premSvg.selectAll("path")
       .data(mapData.features)
       .enter()
       .append("path")
       .attr("d", path)
       .style("fill", function(d) {
             //Get data value
             var value = d.properties.premium[displayYear].value;

             if (value) {
                   //If value exists…
                   return premColor(value);
             } else {
                   //If value is undefined…
                   return "#ccc";
             }
        })
        .style("stroke","grey")
        .append("title")
        .text(function(d) {
              return d.properties.name + ": $" + d3.format(",")(Math.round(d.properties.premium[displayYear].value));
        });

Answer 1

我最终包装代码以更新我的＆＃34;路径＆＃34;填写我的setYear函数：

function setYear(index) {
    displayYear = index;

    premSvg.selectAll("path")
           .style("fill", function(d) {
                //Get data value
                var value = d.properties.premium[displayYear].value;

                if (value) {
                    //If value exists…
                    return premColor(value);
                } else {
                    //If value is undefined…
                    return "#ccc";
                }
            })
            .style("stroke","grey")
            .append("title")
            .text(function(d) {
                return d.properties.name + ": $" + d3.format(",")(Math.round(d.properties.premium[displayYear].value));
            });
}

function setYear(index) {
                displayYear = index;

                premSvg.selectAll("path")
                        .style("fill", function(d) {
                            //Get data value
                        var value = d.properties.premium[displayYear].value;

                        if (value) {
                            //If value exists…
                            return premColor(value);
                        } else {
                            //If value is undefined…
                            return "#ccc";
                        }
                    })
                    .style("stroke","grey");

                premSvg.selectAll("title")
                       .text(function(d) {
                        return d.properties.name + ": $" + d3.format(",")(Math.round(d.properties.premium[displayYear].value));
                });
            }