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

我结束包装代码以更新我的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));
                });
            }