D3 JS：将垂直分组的条形图转换为水平分组的条形图答案

【问题标题】：D3 JS: Transforming the vertically grouped bar chart to horizontally grouped bar chartD3 JS：将垂直分组的条形图转换为水平分组的条形图
【发布时间】：2016-06-10 11:32:52
【问题描述】：

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

任何帮助将不胜感激！

【问题讨论】：

标签： javascript d3.js charts bar-chart

【解决方案1】：

这种转换比您最初想象的要复杂一些。在您共享的 sn-p 中，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);
}

【讨论】：