Question

我在D3中制作了一个条形图，总共有18个小节，我试图展示所有小节如何聚集到低，中和高的范围（每个范围内有六个小节）。我希望这些集群之间存在视觉差距（因此它们明显不同） - 问题在于可以根据图表中未显示的其他数据使用条形图（想想人口统计数据，看看条形图如何以不同的方式聚集。）

Here's what it looks like now

这是我制作和排序栏的代码

        svg.selectAll("rect.bars")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("class", "bars")
            .attr("x", 0 + padding)
            .attr("y", function(d, i){
                return yScale(i);
            })
            .attr("width", function(d) {
                return xScale(d.values[0]);
            })
            .attr("height", yScale.rangeBand())


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

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

            });

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

            });

最终我试图让它看起来像这样（但水平布局）

enter image description here

Answer 1

如果您使用ordinal.rangeBands创建d3.scale.ordinal，则最终会根据您网域中的值数量（在您的情况下为3）将其分解为不连续的范围。缩放值将返回相关波段开头的位置。

使用rangeBands配置的序数比例具有一个很好的便利函数，称为ordinal.rangeBand，它将返回波段的范围。因此，您可以先将条形位置缩放到乐队的开头，然后根据条带的数量和条形的宽度进行一些数学计算，以便简单地将条形均匀地展开频带。

在D3中的可排序条形图中创建集群

1 个答案: