D3.js 我可以通过编程方式将一个数据系列向下移动到较低的x轴吗？

我有一个d3堆叠柱形图，我非常满意。完整的代码在一个文件夹中

我想做的是去掉最后一个数据系列，并将其设置在自己的轴上，但确保它保持相同的比例。如果这是我的数据：

var dataset = [
  // apples
  [{"x": 1, "y": 5 }, { "x": 2, "y": 4 }, { "x": 3, "y": 2 }, { "x": 4, "y": 7 }, { "x": 5, "y": 23 }],
  // oranges
  [{ "x": 1, "y": 10 }, { "x": 2, "y": 12 }, { "x": 3, "y": 19 }, { "x": 4, "y": 23 }, { "x": 5, "y": 17 }],
  // grapes
  [{ "x": 1, "y": 22 }, { "x": 2, "y": 28 }, { "x": 3, "y": 32 }, { "x": 4, "y": 35 }, { "x": 5, "y": 43 }],
  // carrots
  [{"x": 1, "y": 5 }, { "x": 2, "y": 4 }, { "x": 3, "y": 23 }, { "x": 4, "y": 2 }, { "x": 5, "y": 7 }]
];

我想把苹果、桔子和葡萄堆放在一起，但我想把胡萝卜分开。胡萝卜总是最后一个系列。我希望我能用这个把胡萝卜拉到同一个SVG中：

var lower_svg = d3.select("#chart")
  .append("svg")
  .attr("width", w)
  .attr("height", b);

var lower_rects = lower_svg.selectAll("rect")
  .data(dataset[3])
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return xScale(i);
  })
  .attr("y", h)
  .attr("height", function(d) {
    return yScale(d.y);
  })
  .attr("width", xScale.rangeBand());

但是a）这不起作用（它不画任何东西）和b）调用数据系列3，这恰好是本例中的最后一个，但并不总是

而且。。。如果它真的起作用，它会画胡萝卜两次，一次和其他水果堆放在一起，一次在下面。我只想在下面画一次

我想要的是各种水果的图表：

这张胡萝卜图：

---

使用相同的x和y比例并从相同的数据集中提取，其中，胡萝卜只是集合中的最后一个系列

我已经这样解决了您的问题：

第1步：

我弹出胡萝卜相关的数据

var carrots = dataset.pop(); store it in variable carrots

步骤2

我分成两组

//this g(group) will hold the stacked chart for carrot
var svgcarrot = svg.append("g").attr("transform", "translate(0,200)");
//this g(group) will hold the stacked chart for other fruits
var svg = svg.append("g").attr("transform", "translate(0,-150)");
//you may change the translate to move the chart as per your choice of positioning.

步骤3

制作一个函数，使图表输入svg组及其相关数据集

//here svg is the group on which you wish to draw the chart.
//dataset is the data for which the chart need to be drawn.
function makeChart(dataset, svg) {

步骤4

在

makeChart

函数中，使用常用的堆栈条形图代码

function makeChart(dataset, svg) {
  var stack = d3.layout.stack();
  stack(dataset);//set  data
  xScale = d3.scale.ordinal()
    .domain(d3.range(dataset[0].length))
    .rangeRoundBands([0, w], 0.05);

  yScale = d3.scale.linear()
    .domain([0,
      d3.max(dataset, function(d) {
        return d3.max(d, function(d) {
          return d.y0 + d.y;
        });
      })
    ])
    .range([0, h / 2]);//2 chart so height/2
  //make groups for fruits
  var groups = svg.selectAll("g")
    .data(dataset)
    .enter()
    .append("g")
    .style("fill", function(d, i) {
      return colors(i);
    });
  //make rectangles
  var rects = groups.selectAll("rect")
    .data(function(d) {
      return d;
    })
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
      return xScale(i);
    })
    .attr("y", function(d, i) {
      return h - b - (yScale(d.y0 + d.y));
    })
    .attr("height", function(d) {
      return yScale(d.y);
    })
    .attr("width", xScale.rangeBand());

}

步骤5

现在制作你的第一张图表

makeChart(dataset, svg);//note dataset has no carrot data as its popped in step1 also the svg container group made in step 2

makeChart([carrots], svgcarrot);//make carrot chart note the svgcarrot container group made in step 2

---

工作示例

但是。。。yScale已关闭--它每次都与可用空间相关。两个图表应该使用相同的yScale。在yScale的帮助下，现在可以工作了。您可以将两个图表并排排列。更改组的翻译

var svgcarrot=svg.append（“g”）.attr（“transform”，“translate（500，-150）”）var svg=svg.append（“g”）.attr（“transform”，“translate（0，-150）”）在步骤2中提到。工作代码