D3 JS: Преобразование вертикально сгруппированной гистограммы в горизонтально сгруппированную гистограмму

Question

Я новичок в мире D3. Я столкнулся с сложной ситуацией, когда пытаюсь преобразовать этот example в горизонтально сгруппированную гистограмму. Я выполнял пункты, описанные в this post для преобразования. Это моя версия code.

Я преобразовал все домены и диапазоны для горизонтальных групповых диаграмм, но не смог добиться успеха.

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

Любая помощь была бы принята с благодарностью!

Answer 1

Это преобразование немного сложнее, чем вы могли бы предположить вначале. В фрагменте, который вы разделили, диапазон yScale равен [innerWidth, 0], когда он должен быть [0, innerHeight]. Ниже приведены соответствующие части. Вы можете видеть, как он работает в реальном времени here.

Обратите внимание, что я использую компоновку стека d.x как вход для оси y, а d.y - как вход для оси x. Это потому, что d3.layout.stack не имеет ориентации в качестве параметра.

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