Question

我要这样做：http://examples.oreilly.com/0636920026938/chapter_10/14_div_tooltip.html除了自定义数据有两个字段：“月”和“比率”。

这是我的javascript代码，看起来非常类似于上面发布的链接。 http://pastebin.com/KG2tX5Xm 主要区别在于规模（我的数月）和x，y属性需要基于data.Ratio或data.Month。

当我查看页面的来源时，我发现点击后矩形的坐标会发生变化;然而，他们保持原状。为什么会这样，我该如何解决？

Answer 1

当.sort()选择（在这种情况下为rect元素）时，更改的内容是每个元素的索引。数据不会改变。您链接的示例使用相应元素的索引来确定排序后和重绘期间条形的x位置。因此，条形的位置会发生变化。

在您的代码中，您根本不使用条形索引来确定它们的位置。您正在使用绑定到元素的数据，这些数据在排序时不会更改。

您的一般方法与您所链接的示例中的方法不同。在那里，数据本身被排序（或者更确切地说是选择），并且其顺序对于条的位置很重要。在你正在做的事情中，数据的顺序无关紧要，因为你只是使用数据本身。

因此，为了使排序有任何效果，请更改代码以使用索引来确定条形的位置：

svg.selectAll("rect")
    .sort(function(a, b) {
            if (sortOrder) {
                    return d3.ascending(a.Ratio, b.Ratio);
            } else {
                    return d3.descending(a.Ratio, b.Ratio);
            }
    })
    .transition()
    .delay(function(d, i) {
            return i * 50;
    })
    .duration(1000)
    .attr("x", function(d, i) {
            return i * x.rangeBand();
    });

D3 CSV导入排序功能显示

1 个答案: