0

总之，这里的问题是我渲染代码的 svg 标记（使用我的浏览器开发工具查看）确实显示了所需的标记元素数据绑定；但是，该绑定不会反映在呈现的视图中。

上下文：我构建了一个网格（一个 mxn 方形单元格矩阵），其中每个单元格都呈现为svg rect；数据是一个 json 对象数组，每个单元格一个对象；每个对象都由许多属性组成；我将这些属性之一的值呈现为每个单元格的表面内可见的标签（svg“文本”元素）。

初始渲染很好——完全符合我的要求。

我刚刚添加了一个调用排序函数的小部件（简单按钮）。

单击此按钮时，我可以通过查看标记看到排序本身正在工作——即，单击排序按钮后，标签（如下面的标记所示）现在处于正确的排序顺序：

<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 回答