Die Werte auf der x-Achse sind absteigende Werte auf gruppierten Balkendiagramm mit d3.js

Ich habe das vertikale gruppierte Balkendiagramm aus horizontal gruppierten Balkendiagramm umgewandelt. Ich habe den Code von der Website https://bl.ocks.org/mbostock/3887051 genommen. Das Problem ist, wenn ich die horizontale auf die vertikale Achse transformiert habe, sind die Werte auf der x-Achse nicht aufsteigend, sondern sie sind absteigend, dh die Werte sind 10M, 8M, 6M, 4M etc .... Ich bin mir nicht sicher, wo ich ein gemacht habe Fehler.Die Werte auf der x-Achse sind absteigende Werte auf gruppierten Balkendiagramm mit d3.js

<!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: 50, left: 140}, 
    width = 800 - margin.left - margin.right, 
    height = 900 - margin.top - margin.bottom; 

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

var x1 = d3.scale.ordinal(); 

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

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

var xAxis = d3.svg.axis() 
    .scale(y) 
    .orient("top").ticks(5); 

var yAxis = d3.svg.axis() 
    .scale(x0) 
    .orient("left"); 

var svg = d3.select("body").append("svg") 
    .attr("height", width + margin.left + margin.right) 
    .attr("width", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.csv("data.csv", function(error, data) { 
    if (error) throw error; 

    var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; }); 

    data.forEach(function(d) { 
    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; }); 
    }); 

    x0.domain(data.map(function(d) { return d.State; })); 
    x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]); 
    y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]); 

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

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

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

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

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

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

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

}); 

</script>

Quelle

2016-04-19 KSK

Sie y-Skala, die auf der x-Achse verwendet wird, ist definiert als:

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

Dieses es in umgekehrter Richtung verläuft und sein sollte:

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

Quelle

2016-04-19 16:38:05 Mark

Dank dieses Problem gelöst mein Problem ! – KSK

Die Werte auf der x-Achse sind absteigende Werte auf gruppierten Balkendiagramm mit d3.js

Antwort

Verwandte Themen