2

我正在使用 D3 为数组中的每个对象绘制一个矩形，矩形的高度取决于对象的“大小”属性。这些矩形堆叠在一起。我目前通过对绘制的每个后续矩形的“大小”求和来设置 y 位置 - 但这似乎是错误的 - 我想知道是否有更好的方法来做到这一点，例如访问前一个的 'y' 属性项目（以及如何？）或其他方式...

堆叠的矩形

这就是我的代码的本质。下面有一个指向小提琴的链接。

    var cumY = 0;
    var blocks1 = sampleSVG.selectAll("rect")
    .data(fpp)
    .enter()
    .append("rect")
    .sort(SortBySize)
    .style("stroke", "gray")
    .style("opacity", blockOpacity)
    .style("fill", function (d) {return d.Colour})
    .attr("width", 80)
    .attr("height", function (d) {return d.Size})
    .attr("x", 5)
    .attr("y", function (d, i) {
    var thisY = cumY;
    cumY += d.Size;
    // perhaps I could just return something like d.Size + previousItem.GetAttribute("y") ???
    return thisY;
    });

http://jsfiddle.net/ninjaPixel/bvER3/

4

1 回答 1

2

这很棘手！你是对的，跟踪累积高度“似乎是错误的”——它现在可以工作，但它不是很惯用的 d3，一旦你开始尝试做更复杂的事情，它就会变得非常混乱。

我会尝试使用 d3 的内置堆栈布局来解决这个问题。如果遇到困难，您可能希望开始使用此示例并发布更新的小提琴。祝你好运！

于 2013-06-04T03:35:35.390 回答