D3 js изменить данные при нажатии кнопки

Question

Я делаю визуализацию в D3, я хочу нажать кнопку, изменить значения данных и отобразить их, но визуализация не изменится при нажатии кнопки. постскриптум на консоли не появляются ошибки.

Это мой код Javascript

var chart = circularHeatChart() 
     .segmentHeight(30) 
     .innerRadius(25) 
     .numSegments(24) 
     .range(["white", "red"]) 
     .radialLabels(["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]) 
     .segmentLabels(["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]) 
     ; 


    var week1 =[15,8,6,5,3,11,8,13,24,29,18,26,23,23,24,33,29,28,43,43,23,24,26,16,25,8,8,9,6,3,6,15,21,21,18,24,36,27,24,27,24,29,34,36,25,35,15,10,15,7,10,6,4,9,10,8,11,18,24,27,25,22,28,25,21,35,25,30,29,23,20,17,10,9,5,4,5,5,2,13,23,20,20,28,22,28,27,25,28,20,24,28,29,25,22,12,16,13,7,8,5,5,6,18,19,31,28,30,30,37,34,35,28,30,28,41,33,31,28,28,24,20,19,20,6,9,3,12,18,28,30,26,39,28,27,43,26,36,31,43,40,47,37,18,25,25,34,20,18,13,11,16,19,26,32,26,33,25,31,36,29,28,37,33,40,31,32,24]; 
    var week2 =[17,12,12,12,6,5,8,17,22,30,24,34,41,30,37,34,36,45,31,28,30,30,29,29,17,12,7,10,5,5,8,11,21,28,28,32,43,31,43,38,37,31,36,36,30,34,30,18,33,14,12,8,4,7,15,16,21,30,32,35,33,37,44,37,33,31,33,50,42,38,29,20,23,5,3,7,17,9,8,19,28,38,37,39,44,33,38,39,45,44,32,47,42,36,28,26,31,12,19,13,4,5,12,23,23,39,33,37,38,22,50,34,40,22,37,53,24,33,45,40,28,35,35,23,14,19,9,13,12,27,38,37,53,29,26,37,45,39,32,45,43,39,31,27,32,51,16,21,12,21,10,9,21,16,27,35,39,36,27,38,32,42,40,33,39,30,35,27,]; 
    var week3 =[44,31,12,12,13,9,5,11,14,20,40,40,47,35,40,30,39,30,31,40,52,42,35,25,32,13,15,28,6,8,10,16,25,41,33,49,41,41,34,56,50,39,49,45,48,37,32,23,28,8,13,7,3,9,11,18,30,47,30,29,46,51,29,48,33,42,47,45,43,45,37,31,22,10,5,5,11,6,12,23,38,38,37,36,45,34,41,50,45,60,47,46,33,28,33,22,25,18,11,14,10,5,15,16,26,38,32,32,42,45,38,50,45,38,57,54,43,40,50,38,36,29,25,21,10,12,17,6,19,23,28,33,29,39,22,38,39,37,56,42,44,55,43,41,47,37,32,25,23,8,7,11,12,16,20,33,33,24,24,35,30,34,30,41,37,27,19,26,]; 
    var week4 =[15,15,9,10,9,7,12,20,19,33,36,26,45,38,28,45,49,22,44,35,48,25,23,31,19,13,6,9,8,2,11,19,21,27,33,37,51,32,39,39,44,26,38,43,38,40,38,18,25,13,9,9,6,9,7,22,22,43,30,18,34,21,36,44,43,30,37,40,30,34,34,20,16,18,8,6,11,11,15,13,28,40,43,38,34,38,45,45,40,28,31,45,29,37,41,16,32,17,14,6,14,4,5,25,22,34,30,19,38,30,35,46,30,33,43,47,46,41,46,38,47,42,36,29,21,16,20,17,30,52,40,38,64,59,66,63,60,47,67,85,66,72,82,52,]; 



     d3.select('#energychart') 
     .selectAll('svg') 
     .data([week4]) 
     .enter() 
     .append('svg') 
     .attr("height", 500) 
     .call(chart).attr("transform", "translate(" + 200 + "," + 10 + ")"); 



d3.select("#changedata") 
     .on("click", function() { 



d3.select('#energychart') 
     .selectAll('svg') 
     .data([week2]) 
     .enter() 
     .append('svg') 
     .attr("height", 500) 
     .call(chart).attr("transform", "translate(" + 200 + "," + 10 + ")"); 



     }) 

что я должен делать?

Answer 1

Я не совсем уверен, как можно использовать Circular Heat Chart с обновлением и выходом. Тем не менее, если вы сбрасываете HTML вашего SVG путем добавления этой строки

d3.select('#energychart').html(""); 

в по щелчку обратного вызова,

это делает, как вы делали это работать. fiddle

Однако более подробное исследование этого convention, вероятно, даст более элегантное решение.