Wie erstellt man ein anklickbares Balkendiagramm, um 3 Grafiken in d3 v4 anzuzeigen?

Question

Gibt es eine Möglichkeit, einen anklickbaren Übergangsbalken zu erstellen, so dass drei verschiedene Graphen beteiligt sind? So dass es automatisch Grafik 1 lädt, und wenn Sie darauf klicken, zeigt Grafik 2, und wenn Sie erneut klicken, zeigt es Grafik 3, und schließlich, wenn Sie noch einmal klicken, geht es zurück zu Grafik 1?

aktuellen Code

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

Sie eine Funktion machen, die Daten wie folgt zurückgibt:

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 
    ]; 
    } 
} 

Nun rufen Sie die getMyData Funktion auf Klick, für jeden die Balken Dataset aktualisiert werden erhalten.

Arbeits Code here