0

私は D3 の一般的な用途ではないことを認めたインタラクティブに取り組んでいますが、4 部構成の物語の最初の 3 フェーズを作成してアニメーション化するのに非常に役立ちました。最終段階では、ユーザーがいくつかの要因から選択して並べ替えられるようにしたいと考えています。いずれの場合も、並べ替えの結果、それぞれ<rect>が 2 つのグループのいずれかに属します。本質的に、これは単なるグループ化された棒グラフです。

写真は私が思う言葉よりも優れているので、ここに2つの例があります: http://thatmichael.com/sandbox/immigration/sample.png


問題は、2 つのグループの間にわずかなギャップがあることです。

すべての<rect>s が同じ 内にある場合、次の<g>ようなもので簡単になると思います:

d3.select("#theGroup").selectAll("rect")
  .sort(function(a, b) {
    return d3.ascending(a.party, b.party) || d3.ascending(a.lastName, b.lastName);
  });

しかし、私はグループ間のスペースを確保したいと思っています。


別の次善の解決策は、考えられるすべての方法でデータをネストしてから、すべての を削除<rect>して新しいデータセットで再描画することです。このようなもの：

oldSenateByVote = d3.nest()
    .key(function(d) {return d.vote;})
    .sortKeys(d3.descending)
    .entries(oldSenate);

var svg = d3.select("#barWrapper svg")
    .attr("width", bar.w)
    .attr("height", bar.h);

    var g = svg.selectAll("g.groups")
    .data(oldSenateByVote)
    .enter()
    .append("g")
    .attr("class", "groups");

    g.selectAll("rect")
    .data(function(d) {return d.values})
    .enter().append("rect")
    .transition().duration(1000)
    .attr("x", function(d, i) {
        return i * (token.w + 1) + bar.paddingLeft;
    });
    .attr("y", bar.paddingTop)
    .attr("width", token.w)
    .attr("height", token.h)
    .each(function(d, i) {
        if (d.party == "R") {
            d3.select(this).attr("class", "token gop");
        } else {
            d3.select(this).attr("class", "token dem");
        }
    });

しかし、要素が出入りすることは決してないため、オブジェクトが一定のままであることが最善です。

これを行う方法を知っている人はいますか？それとも、少なくともそれを偽造しますか？おそらく答えは<rect>、1つの「グループ」内のすべての にクラスを追加し、それを使用してそのグループを手動で10px以上移動することですが、それは本当にハックっぽいようです。

4

0 に答える 0