javascript - D3.js 堆栈布局过渡和对齐 |用 fiddle (重做)

经过多个小时的反复试验，我想我可能会错过一些一般性的东西。我设法在 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)},
```

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

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

<!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>

最佳答案

我为你创建了一个 fiddle here 。条形的 x 属性更改为

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

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

关于javascript - D3.js 堆栈布局过渡和对齐 |用 fiddle (重做)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25099230/

javascript - D3.js 堆栈布局过渡和对齐 |用 fiddle (重做)

上一篇：javascript - 为分页导航功能添加延迟

下一篇：javascript - 我使用 CoffeeScript 时遇到引用错误