Question

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

的上下文 的：我建立了一个网格（方形单元格的m×n矩阵），其中每个单元格都被渲染作为 svg rect ;数据是一个json对象数组，每个单元一个对象;每个对象都是由许多房产组成;我呈现的其中一个属性的值作为标签（svg“text”元素）在每个单元格的面内可见。

初始渲染很好 - 正是我想要它做的。

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

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

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

但这种情况并未反映在 呈现的 标签中。

probelem必须在我的排序函数（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;
    })

Answer 1

看起来您正在根据原始数据中的x和y值定位广告：

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

重新排序数据时，这些x和y值保持不变。没有任何关于诉诸影响他们。并且，只使用DOM元素不会重新定位这些使用显式“x”和“y”属性进行定位的rects。

您需要将这些x和y值更新为反映新排序的值。或者，如果rects的定位完全基于排序顺序，那么您需要将返回值更改为i的函数 - 排序数组中的每个数据索引 - 而不是原始数据。

使用d3.js对绑定到svg元素的数据进行排序

1 个答案: