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

【问题标题】：Updating an axis when reordering bar charts in D3在 D3 中重新排序条形图时更新轴
【发布时间】：2013-09-02 17:38:22
【问题描述】：

我已经构建了一个水平条形图，其中条形图基于一组不同的标准（存储为数组）。虽然我可以让条形图对我似乎无法做的事情进行排序，但让 y 轴重新绘制或重新排序以符合图表的条形图。

现在是页面： enter link description here

以下是编写标签和排序条形的代码：

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

            });

【问题讨论】：

看起来所有不同的选项都具有相同的 y 域，因此重绘轴不会产生明显的变化。是这样吗？
现在是的 - 我要做的是从我的排序函数.sort(function(a, b){ return d3.ascending(a.values[4], b.values[4]) }) 中获取重新排序的域我想要改变轴域来反映这个（基本上域已经改变了，我需要轴来反映这一点）
我可能遗漏了一些东西——你不会更新域然后重绘轴吗？

标签： javascript html d3.js

【解决方案1】：

使用selection.sort 重新定位节点可能不是最好的方法。通常最好从数据开始，然后让 DOM 表示从中流动。将数据视为所有其他表示的锚点，这样可以更轻松地管理图表中的后续状态更改。例如，您不需要像使用基于索引的yScale 那样进行特殊处理。

您的每个点击处理程序都可以：

对数据集数组进行排序。
创建（或修改）yScale 将域名设置为与数据顺序相同的名称。
将yScale 设置为yAxis 并渲染它。
将数据集绑定到条形图，并通过缩放设置x 和y 属性。

如果您希望条形像现在一样浮动，您可以将一个键函数传递给selection.data 调用。如果您不指定键（索引的默认键），条形图将保留在原处，并随着它们所代表的名称的变化而增长或缩小。

通过这种方法，对数据集的更改将推动对文档中不同表示的更改。

【讨论】：