15

ペアでグループ化された縦棒グラフがあります。水平に反転する方法をいじってみました。私の場合、キーワードは y 軸に表示され、スケールは x 軸に表示されます。

さまざまな x/y 変数を切り替えてみましたが、もちろんファンキーな結果しか得られませんでした。縦棒から横棒に切り替えるには、コードのどの領域に注目する必要がありますか?

My JSFiddle: Full Code

var xScale = d3.scale.ordinal()
    .domain(d3.range(dataset.length))
    .rangeRoundBands([0, w], 0.05);

// ternary operator to determine if global or local has a larger scale
var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) {
    return (d.local > d.global) ? d.local : d.global;
})])
    .range([h, 0]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .tickFormat(function (d) {
        return dataset[d].keyword;
    })
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(5);

var commaFormat = d3.format(',');

//SVG element
var svg = d3.select("#searchVolume")
    .append("svg")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Graph Bars
var sets = svg.selectAll(".set")
    .data(dataset)
    .enter()
    .append("g")
    .attr("class", "set")
    .attr("transform", function (d, i) {
        return "translate(" + xScale(i) + ",0)";
    });

sets.append("rect")
    .attr("class", "local")
    .attr("width", xScale.rangeBand() / 2)
    .attr("y", function (d) {
        return yScale(d.local);
    })
    .attr("x", xScale.rangeBand() / 2)
    .attr("height", function (d) {
        return h - yScale(d.local);
    })
    .attr("fill", colors[0][1])
    ;

sets.append("rect")
    .attr("class", "global")
    .attr("width", xScale.rangeBand() / 2)
    .attr("y", function (d) {
        return yScale(d.global);
    })
    .attr("height", function (d) {
    return h - yScale(d.global);
    })
    .attr("fill", colors[1][1])
    ;

    sets.append("rect")
        .attr("class", "global")
        .attr("width", xScale.rangeBand() / 2)
        .attr("y", function (d) {
        return yScale(d.global);
    })
        .attr("height", function (d) {
        return h - yScale(d.global);
    })
        .attr("fill", colors[1][1])
    ;
4

3 に答える 3

1

この場合に使用する手順は次のとおりです。

1) すべての X と Y を逆にする

2) y の 0 が上にあることに注意してください。したがって、y の以前の値が反転されるため、多くの値を反転する必要があります (x 軸を左から右に移動させたくない) と、新しい y 軸も反転します。

3) バーが正しく表示されていることを確認します

4) 問題があれば凡例を適応させる

この質問は、横棒グラフから縦棒グラフに移動する方法を示しているという意味で役立つ場合があります:正と負の値を持つ d3.js ヒストグラム

于 2013-04-25T00:59:03.537 に答える