javascript - real - D3js-cambia el gráfico de barras verticales al gráfico de barras horizontales

graficas html javascript

Question

Tengo un gráfico de barras verticales que se agrupan en pares. Estaba tratando de jugar con cómo voltearlo horizontalmente. En mi caso, las palabras clave aparecerían en el eje y, y la escala aparecería en el eje x.

Traté de cambiar varias variables x / y, pero eso por supuesto solo produjo resultados funky. ¿En qué áreas de mi código debo enfocarme para pasar de las barras verticales a las horizontales?

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

Answer 1

Anoche hice lo mismo y, básicamente, terminé reescribiendo el código, ya que era más rápido que solucionar todos los errores, pero aquí están los consejos que puedo darte.

Los problemas más importantes al voltear los ejes xey son los siguientes: return h - yScale(d.global) porque la altura se calcula desde la "parte superior" de la página, no desde la parte inferior.

Otra cosa clave para recordar es que cuando establece .attr("x", ..) asegúrese de establecerlo en 0 (más cualquier relleno para el lado izquierdo) so = .attr("x", 0)"

Usé este tutorial para ayudarme a pensar en mi propio código en términos de barras horizontales en su lugar, realmente me ayudó

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

aquí está mi propio código que lo hace horizontal si ayuda:

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())

Answer 2

Una alternativa es rotar la tabla (ver esto ). Esto es un poco raro ya que necesitas mantener los ejes intercambiados en tu cabeza (la altura es en realidad el ancho, etc.), pero podría decirse que es más simple si ya tienes un gráfico vertical en funcionamiento.

Un ejemplo de rotación del cuadro está a continuación. Es posible que deba rotar el texto también para hacerlo agradable.

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

Answer 3

Otro gráfico horizontal interesante NVD3 que encontré útil. Darle una oportunidad.

Answer 4

Este es el procedimiento que uso en este caso:

1) Invertir todas las X e Y

2) Recuerda que el 0 para y está en la parte superior, así tendrás que invertir muchos valores ya que los valores previos para y serán invertidos (no quieres que tu eje x vaya de izquierda a derecha) y el nuevo eje y será invertido también

3) Asegúrate de que las barras se vean correctamente

4) Adaptar leyendas si hay problemas

Esta pregunta puede ayudar en el sentido de que muestra cómo pasar de gráficos de barras horizontales a verticales: el histograma d3.js con valores positivos y negativos