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如何用于更新和退出。但是，如果您通过添加此行重置svg的html

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

点击回调中的

，

它使你如何工作。 fiddle

然而，对此convention的更多调查可能会产生更优雅的解决方案。

D3 js在按钮点击时更改数据

1 个答案: