Question

我已经建立了一个水平条形图，其中条形图基于一组不同的标准（存储为数组）。虽然我可以让条形图排序我似乎无法做的是让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);

            });

Answer 1

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

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

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

如果您希望条形图像现在一样浮动，您可以将键功能传递给selection.data调用。如果你没有指定一个键（索引的默认键），那么这些条将保持不变，只要它们改变它们所代表的名称就会增长或缩小。

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

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

1 个答案: