0

D3 で棒グラフを作成します。シリーズには合計 18 本の棒があり、すべての棒がどのように低、中、高の範囲に集まっているかを示そうとしています (各範囲に 6 本の棒)。これらのクラスターのそれぞれの間に視覚的なギャップがあることを望みます (そのため、それらは明確に区別されます)。さまざまな方法でクラスター化されます)。

これが今の様子です

これがバーを作成してソートするための私のコードです

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

            });

最終的には、このように見えるようにしようとしています（ただし、水平にレイアウトされています）

ここに画像の説明を入力

4

1 に答える 1

0

ordinal.rangeBandsd3.scale.ordinalを使用して作成すると、ドメイン内の値の数 (この場合は 3) に基づいて個別のバンドに分割されるスケールになります。値をスケーリングすると、関連するバンドの開始位置が返されます。

で構成された序数スケールには、バンドの範囲を返すordinal.rangeBandrangeBandsという便利な関数があります。したがって、バーの位置をバンドの先頭にスケーリングすることから始めることができます。これは、バーの数と各バーの幅を含むバンドの範囲に基づいて少し計算を行い、バーを全体に均等に広げます。バンド。

于 2013-08-23T17:22:29.400 に答える