Gestapelte Balken, die nicht mit eindeutigen Datensätzen angezeigt werden

Ich versuche different countries and its citywise population mit stacked bar chart anzuzeigen, aber der Datensatz ist unique. Die Städte und Länder sind eindeutig exklusiv. Mein Diagramm zeigt nur die ersten Daten im Satz gemäß dem Code. Aber wie funktioniert es, damit es alle Daten mit verschiedenen gestapelten Balken für jedes Land anzeigen kann? Hier ist der Code für das, was ich bisher versucht habe: https://jsbin.com/qopazukahi/edit?html,output.Gestapelte Balken, die nicht mit eindeutigen Datensätzen angezeigt werden

Unten ist mein Dataset:

var data=[ 
    { 
    "Country": "India", 
    "Delhi": 310504, 
    "Kolkata": 552339, 
    "Chennai": 259034, 
    }, 
    { 
    "Country": "Australia", 
    "Melbourne": 62083, 
    "Sydney": 85640, 
    "Perth": 42153, 
    "Canberra": 74257, 
    }, 
    { 
    "Country": "USA", 
    "New York": 415910, 
    "Miami": 828669, 
    "Frankfort": 362642, 
    "Portland": 601943, 
    "Topeka": 1804762, 
    }, 

];

Hier ist meine komplette Code:

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

body { 
    font: 10px sans-serif; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.bar { 
    fill: steelblue; 
} 

.x.axis path { 
    display: none; 
} 

</style> 
<body> 
<script src="//d3js.org/d3.v3.min.js"></script> 
<script> 

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var x = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .1); 

var y = d3.scale.linear() 
    .rangeRound([height, 0]); 

var color = d3.scale.ordinal() 
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .tickFormat(d3.format(".2s")); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
var data=[ 
    { 
    "Country": "India", 
    "Delhi": 310504, 
    "Kolkata": 552339, 
    "Chennai": 259034, 
    }, 
    { 
    "Country": "Australia", 
    "Melbourne": 62083, 
    "Sydney": 85640, 
    "Perth": 42153, 
    "Canberra": 74257, 
    }, 
    { 
    "Country": "USA", 
    "New York": 415910, 
    "Miami": 828669, 
    "Frankfort": 362642, 
    "Portland": 601943, 
    "Topeka": 1804762, 
    }, 

]; 

    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Country"; })); 

    data.forEach(function(d) { 
    var y0 = 0; 
    d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; }); 
    d.total = d.ages[d.ages.length - 1].y1; 
    }); 

    data.sort(function(a, b) { return b.total - a.total; }); 

    x.domain(data.map(function(d) { return d.Country; })); 
    y.domain([0, d3.max(data, function(d) { return d.total; })]); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Population"); 

    var Country = svg.selectAll(".Country") 
     .data(data) 
    .enter().append("g") 
     .attr("class", "g") 
     .attr("transform", function(d) { return "translate(" + x(d.Country) + ",0)"; }); 

    Country.selectAll("rect") 
     .data(function(d) { return d.ages; }) 
    .enter().append("rect") 
     .attr("width", x.rangeBand()) 
     .attr("y", function(d) { return y(d.y1); }) 
     .attr("height", function(d) { return y(d.y0) - y(d.y1); }) 
     .style("fill", function(d) { return color(d.name); }); 

    var legend = svg.selectAll(".legend") 
     .data(color.domain().slice().reverse()) 
    .enter().append("g") 
     .attr("class", "legend") 
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

    legend.append("rect") 
     .attr("x", width - 18) 
     .attr("width", 18) 
     .attr("height", 18) 
     .style("fill", color); 

    legend.append("text") 
     .attr("x", width - 24) 
     .attr("y", 9) 
     .attr("dy", ".35em") 
     .style("text-anchor", "end") 
     .text(function(d) { return d; }); 

</script>

Quelle

2016-06-29 Srinivas Gadilli

Benötigte Daten zu berücksichtigen [] alle Indizes in Datenarray als unten:

data.forEach(function(d,i) { 
      var y0 = 0; 
      d.ages = d3.keys(data[i]).filter(function(key) { return !key.match(/Country/); }).map(function(name) { 
       return {name: name, y0: y0, y1: y0 += +d[name]}; 
      });

Hier ist die Arbeit b in: https://jsbin.com/qopazukahi/edit?html,output

Quelle

2016-06-29 12:28:57

-1

seine schwer d3.js gestapelt Graph zu konfigurieren. Es gibt eine Bibliothek über d3.js bekannt als c3.js, die ein einfaches Werkzeug zum Erstellen von gestapelten Graphen ist.

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['data1', -30, 200, 200, 400, -150, 250], 
      ['data2', 130, 100, -100, 200, -150, 50], 
      ['data3', -230, 200, 200, -300, 250, 250] 
     ], 
     type: 'bar', 
     groups: [ 
      ['data1', 'data2'] 
     ] 
    }, 
    grid: { 
     y: { 
      lines: [{value:0}] 
     } 
    } 
});

Hier ist das Beispiel dafür.

, wenn Sie die Achse Verwendung

axis: { 
     rotated: true 
    }

, die die Achse machen drehen möchten

um weitere Informationen zu drehen siehe http://c3js.org/

Quelle

2016-06-29 11:04:07

Ich glaube nicht, dass Sie die Frage haben. Meine Schlüssel sind alle zusammen verschieden, also bekomme ich einen Balken für Indien von oben Daten und USA/Aus fehlen. Ich fragte, ob es irgendeinen Weg gibt, die Daten so zu optimieren, dass ich alle gestapelten Balken sehen kann –

Gestapelte Balken, die nicht mit eindeutigen Datensätzen angezeigt werden

Antwort

Verwandte Themen