Javascript D3 CSV导入排序功能显示

我打算这样做：除了有两个字段的自定义数据：一个“月”和一个“比率”

这是我的javascript代码，看起来与上面的链接非常相似。 主要区别在于量表（我的量表跨越几个月）和x，y属性，它们需要基于data.Ratio或data.Month

---

当我查看页面的源代码时，我看到矩形的坐标在单击后确实发生了变化；然而，他们仍在原地不动。这是为什么？我该如何修复它？

当您

.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();
    });

---

这很有效。为什么排序后填充消失了？我只是用范围带来确定位置。你可以在你的情况下适当地调整它。