0

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

            });
4

1 回答 1

0

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

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

  1. 对数据集数组进行排序。
  2. yScale以与数据相同的顺序创建（或修改）将域设置为名称。
  3. 设置yScale并yAxis渲染它。
  4. 将数据集绑定到条形图并通过缩放设置x和y属性，就像您已经在做的那样。

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

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

于 2013-09-02T22:05:20.917 回答