将垂直堆积条形更改为水平堆叠条形d3.js

var data = [
  { category: "A", dimension1: 10, dimension2: 20, dimension3: 30 },
  { category: "B", dimension1: 15, dimension2: 25, dimension3: 35 },
  { category: "C", dimension1: 20, dimension2: 30, dimension3: 40 }
];

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d3.sum(Object.values(d)); })])
  .range([0, width]);

var yScale = d3.scaleBand()
  .domain(data.map(function(d) { return d.category; }))
  .range([0, height])
  .padding(0.1);

var stack = d3.stack()
  .keys(Object.keys(data[0]).slice(1))
  .order(d3.stackOrderNone)
  .offset(d3.stackOffsetNone);

var series = stack(data);

svg.selectAll("g")
  .data(series)
  .enter()
  .append("g")
  .attr("fill", function(d) { return colorScale(d.key); })
  .selectAll("rect")
  .data(function(d) { return d; })
  .enter()
  .append("rect")
  .attr("x", function(d) { return xScale(d[0]); })
  .attr("y", function(d) { return yScale(d.data.category); })
  .attr("width", function(d) { return xScale(d[1]) - xScale(d[0]); })
  .attr("height", yScale.bandwidth());

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(xScale));

svg.append("g")
  .call(d3.axisLeft(yScale));