javascript - 如何制作可点击的过渡条形图以在 d3 v4 中显示 3 个图形？

Question

有没有办法制作一个可点击的过渡条形图，以便涉及 3 个不同的图表？这样它会自动加载图 1，然后当您单击时它会显示图 2，然后当您再次单击时它会显示图 3，最后如果您再次单击它会返回图 1？

当前代码

var w = 600;
 var h = 250;

 var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
   11, 12, 15, 20, 18, 17, 16, 18, 23, 25
 ];

 var xScale = d3.scaleBand()
   .domain(d3.range(dataset.length))
   .rangeRound([0, w])
   .padding(0.1);

 var yScale = d3.scaleLinear()
   .domain([0, d3.max(dataset)])
   .range([0, h]);

 //Create SVG element
 var svg = d3.select("body")
   .append("svg")
   .attr("width", w)
   .attr("height", h);
 //Create bars
 svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("x", function(d, i) {
     return xScale(i);
   })
   .attr("y", function(d) {
     return h - yScale(d);
   })
   .attr("width", xScale.bandwidth())
   .attr("height", function(d) {
     return yScale(d);
   })
   .attr("fill", function(d) {
     return "rgb(0, 0, " + (d * 10) + ")";
   });
 //Create labels
 svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")
   .text(function(d) {
     return d;
   })
   .attr("text-anchor", "middle")
   .attr("x", function(d, i) {
     return xScale(i) + xScale.bandwidth() / 2;
   })
   .attr("y", function(d) {
     return h - yScale(d) + 14;
   })
   .attr("font-family", "sans-serif")
   .attr("font-size", "11px")
   .attr("fill", "white");
 //On click, update with new data            
 d3.select("p")
   .on("click", function() {
     //New values for dataset
     dataset = [11, 12, 15, 20, 18, 17, 16, 18, 23, 25,
       5, 10, 13, 19, 21, 25, 22, 18, 15, 13
     ];
     //Update all rects
     svg.selectAll("rect")
       .data(dataset)
       .transition() // <-- This makes it a smooth transition!
       .attr("y", function(d) {
         return h - yScale(d);
       })
       .attr("height", function(d) {
         return yScale(d);
       })
       .attr("fill", function(d) {
         return "rgb(0, 0, " + (d * 10) + ")";
       });
     //Update all labels
     svg.selectAll("text")
       .data(dataset)
       .text(function(d) {
         return d;
       })
       .attr("y", function(d) {
         return h - yScale(d) + 14;
       });

   });

<script src="https://d3js.org/d3.v4.min.js"></script>
<p>Click on this text to update the chart with new data values (once).</p>

Answer 1

您可以创建一个返回数据的函数，如下所示:

function getMyData(){
   count++;//here count is a global counter.
   if(count%3 == 0){
     return [11, 12, 15, 20, 18, 17, 16, 18, 23, 25,
       5, 10, 13, 19, 21, 25, 22, 18, 15, 13
     ];
   } else if(count%3 == 1){
      return[5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
       11, 12, 15, 20, 18, 17, 16, 18, 23, 25
     ];
   } else if(count%3 == 2){
      return [15, 10, 3, 19, 21, 15, 12, 8, 25, 23,
       21, 22, 5, 20, 18, 7, 6, 18, 13, 15
     ];
   }
 }

现在点击调用 getMyData 函数，每个数据集的条形图都会更新。

工作代码here