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

【问题标题】：sorting data bound to svg elements using d3.js使用 d3.js 对绑定到 svg 元素的数据进行排序
【发布时间】：2013-07-29 02:39:29
【问题描述】：

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

上下文：我已经构建了一个 grid（一个 m x n 方形单元格矩阵），其中每个单元格都被渲染作为 svg 矩形；数据是一个 json 对象数组，每个单元格一个对象；每个对象都是由多个属性组成；我呈现的这些属性之一的值作为标签（svg“文本”元素）在每个单元格的正面可见。

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

我刚刚添加了一个调用 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>

但这种类型并未反映在渲染标签中。

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

【问题讨论】：

您需要在添加元素时指定此排序顺序。您在上面的代码中所做的只是更改元素的处理顺序，而不是它们的显示顺序。
能否在 javascript 函数中对数据进行排序，然后通过 update() 重新绑定到 SVG 元素？

标签： javascript svg d3.js

【解决方案1】：

看起来您正在根据原始数据中的 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 的函数——排序数组中每个数据的索引——而不是原始数据数据。

【讨论】：