2

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/

4

1 に答える 1

2

これはトリッキーです！累積高さを追跡することは「間違っているように見える」というのは正しいことです。現在は機能していますが、あまり慣用的な d3 ではなく、より複雑なことをしようとするとかなり面倒になります。

この問題を解決するために作成された d3 のビルトインスタック レイアウトを使用してみます。行き詰まった場合は、この例に基づいて作業を開始し、更新されたフィドルを投稿することをお勧めします。幸運を！

于 2013-06-04T03:35:35.390 に答える