gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 12:07:59 26 4
gpt4 key购买 nike

经过多个小时的反复试验,我想我可能会错过一些一般性的东西。我设法在 d3.js 中获得一个水平堆叠条形图(静态)。

现在我面临两个问题:

  1. 如何将条形图对齐在一条垂直线上?

  2. 如何将数据集 1 更改(转换)为数据集 2?

FIDDLE

我不期望完整的代码返工,但是那里的教程对我没有帮助。我认为这可能是一个很好的引用,因为现在有很多关于堆栈溢出的堆栈布局的问题,这表明人们正在寻求对该技术的进一步解释。堆栈布局的其他转换示例(目前)不必要地复杂。

  1. 我认为条形图未向左对齐的原因可能是:

    • 比例函数:

      .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)},

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

  2. 我知道正常的更新/退出/输入机制,但在这里我不知道如何(编码)有效地转换此堆栈布局。我可以在哪里存储内部 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com