Question

经过多个小时的反复试验，我想我可能会错过一些普遍的事情。我设法在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属性：
```
width:function(d){  return x(d.y)},
```

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

我知道正常的更新/退出/输入机制，但在这里我不知道如何（代码）有效地转换这个堆栈布局。我在哪里可以存储内部rect元素的更新部分或如何访问围绕它们的rects选项中的g？

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<script>
var svg = d3.select("body").append("svg")
.attr("width",200)
.attr("height", 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'}]
]

//test array 1
var stack = d3.layout.stack()
var stacked = stack(testArrayForStack);
//test array 2
var stack2 = d3.layout.stack()
var stacked = stack(testArrayForStack);
//log stacked array
console.log('its stacked : ',stacked)
//scale
x = d3.scale.linear()
.range([0, 100])
.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]);
//color
var col = d3.scale.category10();
//update for parents
var stack_up = svg.selectAll('g')
.data(stacked);
//enter for stack parents and there is a nesting for children rect elements   
//how works a transition here (to dataset 2)? How to align them to a left line?
var stack_ent = stack_up
.enter()
.append('g')
.selectAll('rect')
.data(function(d){return d})
.enter()
.append('rect')
.attr({
    y:function(d){      return (d.x*30 )},
    x:function(d){      return +x(d.y)+x(d.y0)},
    height:10,
    width:function(d){  return x(d.y)},
    fill:function(d){   return col(d.id)}
});
</body>
</script>

</html>

Answer 1

我为你创造了一个小提琴here。条形的x属性更改为

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

绘图栏是一个单独的功能。点击更新按钮时会调用新数据。

D3.js堆栈布局转换和对齐|小提琴（重做）

1 个答案: