0

要約すると、ここでの問題は、レンダリングされたコードの svg マークアップ (ブラウザー開発ツールで表示) が、目的のマークアップ要素とデータのバインディングを実際に示していることです。ただし、そのバインディングはレンダリングされたビューには反映されません。

context :各セルがsvg rectとしてレンダリングされるグリッド(正方形セルの mxn マトリックス) を作成しました。データはオブジェクトの json 配列で、セルごとに 1 つのオブジェクトです。各オブジェクトは多数のプロパティで構成されています。これらのプロパティのいずれかの値は、各セルの面内に表示されるラベル (svg "text" 要素) としてレンダリングされます。

最初のレンダリングは問題なく、私がやりたいことを正確に行います。

並べ替え機能を呼び出すウィジェット (シンプルなボタン) を追加しました。

このボタンをクリックすると、マークアップを見ると、並べ替え自体が機能していることがわかります。つまり、並べ替えボタンをクリックすると、下のマークアップに示すように、ラベルが正しい並べ替え順序になっています。

<text id="labels" fill="white" x="140" y="222" text-anchor="middle">122.23</text>
<text id="labels" fill="white" x="304" y="304" text-anchor="middle">135.08</text>
<text id="labels" fill="white" x="304" y="222" text-anchor="middle">141.53</text>
<text id="labels" fill="white" x="222" y="140" text-anchor="middle">195.79</text>
<text id="labels" fill="white" x="222" y="222" text-anchor="middle">244.42</text>
<text id="labels" fill="white" x="222" y="304" text-anchor="middle">255.21</text>
<text id="labels" fill="white" x="304" y="140" text-anchor="middle">258.16</text>

ただし、この並べ替えはレンダリングされた ラベルには反映されません。

問題は、ここにある並べ替え関数 (sortByPropertyX) にある必要があります。

var sortOrder = false;

var sortByPropertyX = function() {
        sortOrder = !sortOrder;
        sortCells = function(x, y) {
    if (sortOrder) {
        return x.someProperty - y.someProperty;
    }
        return y.someProperty - x.someProperty;
        };
        svg.selectAll("rects")
    .sort(sortCells)
    .attr("x", function(d, i) {return d.x})
    .attr("y", function(d, i) {return d.y})

        svg.selectAll("text")
    .sort(sortCells)
    .text(function(d, i) {
        return d.someProperty;
    })
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) {
        return d.x + CELLWIDTH/2;
            })
    .attr("y", function(d, i) {
        return d.y + CELLHEIGHT/2;
    })
4

1 に答える 1

0

生データにある値に基づいxて四角形を配置しているように見えます:y

.attr("x", function(d, i) {return d.x})
.attr("y", function(d, i) {return d.y})

データを再ソートすると、これらxとy値は同じままです。頼ることは彼らに影響を与えません。また、DOM 要素を並べ替えるだけでは、明示的な "x" 属性と "y" 属性を配置に使用するこれらの四角形を再配置することはできません。

xこれらとy値を、新しい並べ替えを反映するものに更新する必要があります。または、四角形の配置が完全に並べ替え順序に基づいている場合は、返される値をi、生データにあるものではなく、並べ替えられた配列内の各データムのインデックスの関数になるように変更する必要があります。

于 2013-07-29T19:08:23.687 に答える