web-dev-qa-db-ja.com

D3js-縦棒グラフを横棒グラフに変更

ペアでグループ化された縦棒グラフがあります。それを水平に反転させる方法を試してみました。私の場合、キーワードは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])
    ;
javascriptd3.jsbar-chart
14
EnigmaRM

昨夜も同じことをしましたが、すべてのバグを修正するよりも速かったので、基本的にコードを書き直すことになりましたが、ここで私が提供できるヒントを紹介します。

X軸とy軸の反転に関する最大の問題は、return h - yScale(d.global)のようなものです。高さは、ページの下部ではなく「上部」から計算されるためです。

覚えておくべきもう1つの重要な点は、.attr("x", ..)を設定するときは、必ず0（および左側のパディング）に設定してください= = .attr("x", 0)"

代わりに、このチュートリアルを使用して、横棒の観点から自分のコードについて考えるのを助けました-それは本当に役に立ちました

http://hdnrnzk.me/2012/07/04/creating-a-bar-graph-using-d3js/

役立つ場合は、次のコードで水平にします。

var w = 600;
var h = 600;
var padding = 30;

var xScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d){
                                return d.values[0]; })]) //note I'm using an array here to grab the value hence the [0]
        .range([padding, w - (padding*2)]);

        var yScale = d3.scale.ordinal()
            .domain(d3.range(dataset.length))
            .rangeRoundBands([padding, h- padding], 0.05);

        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h)

        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .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())
7
Mike

別の方法は、チャートを回転させることです（ this を参照）。交換した軸を頭で維持する必要があるため（これは高さは実際には幅などです）、これは少しハックですが、すでに垂直チャートが機能している場合は間違いなく簡単です。

チャートを回転させる例を以下に示します。ナイスにするために、テキストも回転させる必要があるかもしれません。

_chart.select('g').attr("transform","rotate(90 200 200)");
5
mmmdreg

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

1）すべてのXとYを逆にします

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

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

4）問題がある場合は凡例を採用する

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

1
Christopher Chiche

もう1つの興味深い水平グラフ NVD これは便利だと思いました。試してみる。

0
Free-Minded