D3：如何访问前一项的属性

Question

我使用D3为数组中的每个对象绘制一个矩形，矩形的高度取决于对象的“Size”属性。这些矩形堆叠在彼此之上。我目前通过将每个后续矩形的“大小”相加来设置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/

Answer 1

这很棘手！你跟踪累积高度“似乎是错误的”是正确的 - 它现在有效，但它不是非常惯用的d3，一旦你开始尝试做一些更复杂的事情，它会变得非常混乱。

我会尝试使用内置的stack-layout内置的d3来解决这个问题。您可能希望开始处理this example并发布更新的小提琴，如果您遇到困难。祝你好运！