Данные D3, не обновляющиеся через функцию onclick

Я построил цветную карту с использованием D3 и хочу сделать следующий шаг, позволяющий пользователю просматривать данные по годам, нажав кнопки года. Я привязывал функцию onclick к каждой кнопке, и эта функция обновляет мою переменную displayYear. Я запустил console.log, чтобы убедиться, что эта переменная обновляется правильно, и это так. Однако по какой-то причине моя карта никогда не обновляется, она остается на ее начальном значении независимо от того, что нажата. Мой HTML и Javascript/D3 код ниже:Данные D3, не обновляющиеся через функцию onclick

отношение 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)); 
     });

источник

2015-01-09 MattDionis

я в конечном итоге оборачивать код обновить свой "путь" заполнить в моей функции 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)); 
       }); 
      }

источник

2015-01-09 16:11:41 MattDionis

Данные D3, не обновляющиеся через функцию onclick

ответ

Смежные вопросы