Javascript 在D3中重新排序条形图时更新轴

我构建了一个水平条形图，其中条形图基于一组不同的条件（存储为数组）。虽然我可以让条形图排序，但我似乎做不到的是让y轴根据图表的条形图重新绘制或重新排序

现在是页面：

以下是用于写入标签和对条进行排序的代码：

var yAxisLabelNames = d3.scale.ordinal()
                        .domain(dataset.map(function(d){
                            return d.name;}))
                        .rangeRoundBands([padding, h - padding], 0.05);

var yAxis = d3.svg.axis()
                     .scale(yAxisLabelNames)
                     .orient("left");

svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + padding + ",0)")
            .call(yAxis);

还有我的一个排序功能：

d3.select("#patchCompetition")
            .on("click", function(){
                svg.selectAll("rect.bars")
                    .sort(function(a, b){
                        return d3.ascending(a.values[4], b.values[4])
                    })
                    .transition()
                    .delay(function(d, i){
                        return i *50;
                    })
                    .duration(1000)
                    .attr("y", function(d, i) {
                        return yScale(i)
                    });

                svg.selectAll(".labels")
                    .sort(function(a, b){
                        return d3.ascending(a.values[4], b.values[4])
                    })
                    .transition()
                    .delay(function(d, i){
                        return i * 50;
                    })
                    .duration(1000)
                    .attr("text-anchor", "middle")
                    .attr("y", function(d, i) {
                        return yScale(i) +yScale.rangeBand() /2 +4;
                });

                svg.select(".y axis").call(yAxis);

            });

---

使用

selection.sort

重新定位节点可能不是最好的方法。通常最好从数据开始，让DOM表示从数据开始。将数据视为所有其他表示的锚定，将更容易管理图表中的后续状态更改。例如，您不应该像使用基于索引的

yScale

那样需要特殊处理

每个单击处理程序都可以：

对数据集数组进行排序

创建（或修改）

yScale

将域名设置为与数据相同的顺序

将

yScale

设置为

yAxis

并渲染它

将数据集绑定到条形图，并通过缩放设置

x

和

y

属性，就像您已经做的那样

如果您希望条像现在一样浮动，您可以将一个键函数传递给

selection.data

调用。如果不指定键（索引的默认键），这些条将保持不变，并随着它们所代表的名称的更改而增长或收缩

---

使用这种方法，对数据集的更改将驱动对文档中不同表示的更改。

看起来所有不同选项都具有相同的y域，因此重新绘制轴不会产生明显的更改。是这样吗？现在是的-我想做的是从我的排序函数

.sort（函数（a，b）{返回d3.ascending（a.values[4]，b.values[4]）}中获取重新排序的域。

我想让axis域更改以反映这一点（基本上，域已更改，我需要轴来反映这一点）我可能遗漏了一些内容--您不只是更新域，然后重新绘制轴吗？