Javascript D3.js堆栈布局转换和对齐|带提琴（返工）

经过几个小时的反复试验，我想我可能错过了一些一般性的东西。 我设法在d3.js中获得了一个工作（静态）的水平堆叠条形图

现在我面临两个问题：

如何将这些条对齐成一条垂直线

如何将数据集1更改（转换）为数据集2

我不希望完全的代码返工，但是教程对我没有帮助。 我认为这可能是一个很好的参考，因为现在关于堆栈溢出的堆栈布局有很多问题，这表明人们正在寻求对这项技术的进一步解释。堆栈布局的其他转换示例（目前）非常复杂

我认为横杆未与左侧对齐的原因可能是：

• 比例函数：

  .domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]);
  

• x

  属性：

  x:function(d){      return +x(d.y)+x(d.y0)}
  

  width:function(d){  return x(d.y)},
  

• width

  属性：

  x:function(d){      return +x(d.y)+x(d.y0)}
  

  width:function(d){  return x(d.y)},
  

有人知道如何让所有的堆叠条形图从一个地方开始吗

我知道正常的更新/退出/进入机制，但在这里我不知道如何（编码）有效地转换这个堆栈布局。我可以在哪里存储内部

rect

元素的更新部分，或者如何在围绕它们的

g

选择中访问

rect

var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，200）
.attr（“高度”，200）；
var testArrayForStack=[
[{x:0，y:20，id:'a'}，{x:1，y:30，id:'a'}，{x:2，y:40，id:'a'}]，
[{x:0，y:20，id:'b'}，{x:1，y:30，id:'b'}，{x:2，y:40，id:'b'}]，
[{x:0，y:20，id:'c'}，{x:1，y:30，id:'c'}，{x:2，y:40，id:'c'}]
]
var testArrayForStack_2=[
[{x:0，y:30，id:'a'}，{x:1，y:20，id:'a'}，{x:2，y:20，id:'a'}]，
[{x:0，y:40，id:'b'}，{x:1，y:10，id:'b'}，{x:2，y:10，id:'b'}]，
[{x:0，y:50，id:'c'}，{x:1，y:45，id:'c'}，{x:2，y:50，id:'c'}]
]
//测试阵列1
var stack=d3.layout.stack（）
var stacked=堆栈（testArrayForStack）；
//测试阵列2
var stack2=d3.layout.stack（）
var stacked=堆栈（testArrayForStack）；
//对数叠层阵列
console.log（'its stacked:'，stacked）
//鳞片
x=d3.刻度.线性（）
.范围（[01100]）
.domain（[0，d3.max（stacked[stacked.length-1]，函数（d）{返回d.y0+d.y；}]）；
//颜色
var col=d3.scale.category10（）；
//为家长更新
var stack\u up=svg.selectAll（'g'）
.数据（堆叠）；
//为堆栈父元素输入，子元素rect元素存在嵌套
//这里的转换（到数据集2）是如何工作的？如何将它们与左边的直线对齐？
var stack\u ent=叠加
.输入（）
.append（'g'）
.selectAll（'rect'）
.data（函数（d）{return d}）
.输入（）
.append（'rect'）
艾特先生({
y：函数（d）{return（d.x*30）}，
函数（d）{return+x（d.y）+x（d.y0）}，
身高：10，
宽度：函数（d）{返回x（d.y）}，
fill:function（d）{return col（d.id）}
});

我为你做了一把小提琴。条形图的x属性更改为

    x: function (d) {
        return x(d.y0);
    }

---

绘图栏是一个单独的功能。它在更新按钮上被调用，点击一个新的数据。

这和？我写了这个修改过的问题，因为另一个问题设计得不够好。因为我在网页上找不到任何删除按钮，并且旧问题没有任何代码突出显示（例如），所以我随后编辑了旧问题。如果你想一眼就看到差异，我可以让它看起来更糟，我只是认为最好在有人看到时进行更改。另外，这个老问题得到了否决票，没有任何关于-为什么-的评论，所以可能没有人会点击它。否决票的投票者也没有删除否决票，即使它现在不同了。就是这样。非常感谢！这解决了我所有的问题。如果可以的话，我会按两次向上按钮。