D3 JS: Das vertikal gruppierte Balkendiagramm in ein horizontal gruppiertes Balkendiagramm transformieren

Question

Ich bin neu in der Welt von D3. Ich stehe vor einer komplizierten Situation, wenn ich versuche, diese example in ein horizontal gruppiertes Balkendiagramm umzuwandeln. Ich folgte den in this post beschriebenen Punkten für die Transformation. Dies ist meine Version von code.

Ich habe alle Domänen und Bereiche für horizontale Gruppendiagramme konvertiert, konnte aber möglicherweise nicht erfolgreich sein.

var xScale = d3.scale.linear().range([innerHeight, 0]); 
var yScale = d3.scale.ordinal().rangeBands([innerWidth, 0], barPadding); 




    bars.attr("y", function(d, i, j) { 
     return yScale(d[yColumn]) + barWidth * j; 
    }) 
    .attr("x", 0) 
    .attr("height", barWidth) 
    .attr("width", function(d) { 
     return xScale(d.y); 
    }) 

Jede Hilfe würde sehr geschätzt werden!

Answer 1

Diese Konvertierung ist ein bisschen schwieriger, als Sie zunächst annehmen könnten. In dem von Ihnen freigegebenen Snippet ist der yScale-Bereich [innerWidth, 0], wenn es [0, innerHeight] sein sollte. Unten sind die relevanten Teile. Sie können es live laufen sehen here.

Beachten Sie, dass ich Stapellayout d.x als Eingabe für die y-Achse und d.y als Eingabe für die x-Achse verwende. Das liegt daran, dass d3.layout.stack keine Orientierung als Parameter hat.

var yColumn = "country"; 
var xColumn = "population"; 

var xScale = d3.scale.linear().range([0, innerWidth]); 
var yScale = d3.scale.ordinal().rangeBands([0, innerHeight], barPadding); 
var colorScale = d3.scale.category10(); 

var xAxis = d3.svg.axis().scale(xScale).orient("bottom") 
    .ticks(5) 
    .tickFormat(d3.format("s")) 
    .outerTickSize(0); 
var yAxis = d3.svg.axis().scale(yScale).orient("left") 
    .outerTickSize(0); 

function render(data) { 

    var nested = d3.nest() 
    .key(function(d) { 
     return d[layerColumn]; 
    }) 
    .entries(data); 

    var stack = d3.layout.stack() 
    .y(function(d) { return d[xColumn];}) 
    .values(function(d) {return d.values;}); 

    var layers = stack(nested); 

    yScale.domain(layers[0].values.map(function(d) { 
    return d[yColumn]; 
    })); 

    xScale.domain([ 
    0, 
    d3.max(layers, function(layer) { 
     return d3.max(layer.values, function(d) { 
     return d.y; 
     }); 
    }) 
    ]); 

    colorScale.domain(layers.map(function(layer) { 
    return layer.key; 
    })); 

    xAxisG.call(xAxis); 
    yAxisG.call(yAxis); 

    var layers = g.selectAll(".layer").data(layers); 
    layers.enter().append("g").attr("class", "layer"); 
    layers.exit().remove(); 
    layers.style("fill", function(d) { 
    return colorScale(d.key); 
    }); 

    var bars = layers.selectAll("rect").data(function(d) { 
    return d.values; 
    }); 
    var barWidth = yScale.rangeBand()/colorScale.domain().length; 
    bars.enter().append("rect") 
    bars.exit().remove(); 
    bars 
    .attr("y", function(d, i, j) { 
     return yScale(d[yColumn]) + barWidth * j; 
    }) 
    .attr("x", function(d) { 
     return xScale(d.x); 
    }) 
    .attr("height", barWidth) 
    .attr("width", function(d) { 
     return xScale(d.y); 
    }) 

    colorLegendG.call(colorLegend); 
}