it-swarm.com.de

D3js - Vertikales Balkendiagramm in Horizontales Balkendiagramm ändern

Ich habe ein vertikales Balkendiagramm, das paarweise gruppiert ist. Ich habe versucht, herumzuspielen, wie man es horizontal dreht. In meinem Fall würden die Schlüsselwörter auf der Y-Achse und der Maßstab auf der X-Achse angezeigt.

Ich habe versucht, verschiedene x/y-Variablen zu wechseln, aber das hat natürlich nur funky Ergebnisse gebracht. Auf welche Bereiche meines Codes muss ich mich konzentrieren, um ihn von vertikalen zu horizontalen Strichen zu wechseln?

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])
    ;
14
EnigmaRM

Ich habe gerade gestern das Gleiche getan, und am Ende habe ich den Code umgeschrieben, da er schneller war, als alle Fehler zu beheben, aber hier sind die Tipps, die ich Ihnen geben kann.

Die größten Probleme beim Umdrehen der X- und Y-Achse werden mit Dingen wie return h - yScale(d.global) sein, da die Höhe von "oben" der Seite und nicht von unten berechnet wird. 

Ein weiterer wichtiger Aspekt ist, dass Sie bei der Einstellung von .attr("x", ..) darauf achten, dass Sie den Wert 0 festlegen (zuzüglich der Auffüllung für die linke Seite), also = .attr("x", 0)" 

Ich habe dieses Tutorial verwendet, um mir zu helfen, über meinen eigenen Code in horizontalen Balken nachzudenken - es hat wirklich geholfen 

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

hier ist mein eigener Code, der es horizontal macht, wenn es hilft:

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

Eine Alternative besteht darin, den Chart zu drehen (siehe this ). Dies ist ein bisschen hässlich, da Sie die vertauschten Achsen in Ihrem Kopf beibehalten müssen (die Höhe ist eigentlich die Breite usw.), aber es ist wahrscheinlich einfacher, wenn Sie bereits ein vertikales Diagramm haben.

Ein Beispiel zum Drehen des Diagramms finden Sie unten. Möglicherweise müssen Sie den Text auch drehen, um ihn schön zu gestalten.

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

Hier ist das Verfahren, das ich in diesem Fall verwende: 

1) Inverse alle Xs und Ys

2) Denken Sie daran, dass die 0 für y oben ist. Daher müssen Sie viele Werte umkehren, da die vorherigen Werte für y umgekehrt werden (die x-Achse soll nicht von links nach rechts gehen) und die neue y-Achse wird auch umgekehrt werden. 

3) Stellen Sie sicher, dass die Balken korrekt angezeigt werden

4) Legenden anpassen, wenn Probleme auftreten

Diese Frage kann in dem Sinne hilfreich sein, dass sie zeigt, wie man von horizontalen Balkendiagrammen zu vertikalen geht: d3.js Histogramm mit positiven und negativen Werten

1

Ein weiterer interessanter horizontaler Graph NVD3 , den ich nützlich fand. Versuche es. 

0
Free-Minded