D3js - zmiana pionowego wykresu słupkowego na poziomy Wykres słupkowy

Question

Mam pionowy wykres słupkowy pogrupowany parami. Próbowałem się bawić, jak przekręcić w poziomie. W moim przypadku słowa kluczowe pojawią się na osi Y, a skala pojawi się na osi X.

Próbowałem przełączać różne zmienne x/y, ale to oczywiście tylko produkowane funky wyniki. Na których obszarach mojego kodu muszę się skupić, aby przełączyć je z pionowych na poziome?

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

Po prostu zrobiłem to samo wczoraj wieczorem i zasadniczo skończyłem przepisywanie kodu, ponieważ było szybsze niż naprawianie wszystkich błędów, ale oto wskazówki, które mogę ci dać.

Największe problemy z przewijaniem osi X i Y będą takie, jak return h - yScale(d.global), ponieważ wysokość jest obliczana od "góry" strony, a nie od dołu.

Inną kluczową rzeczą do zapamiętania jest to, że po ustawieniu .attr("x", ..) upewnić go ustawić na 0 (plus jakiekolwiek dopełnienie do lewej strony), więc = .attr("x", 0)"

kiedyś ten poradnik, aby pomóc mi myśleć o własnym kodem pod względem poziomych prętów zamiast - to naprawdę pomogło

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

oto mój własny kod, zarówno poziomo, czy to pomaga:

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

Oto Procedura stosowania w tym przypadku:

1) Inverse wszystkie Xs i Ys

2) pamiętać, że 0 dla Y jest na górze , więc będziesz musiał odwrócić wiele wartości, ponieważ poprzednie wartości dla y zostaną odwrócone (nie chcesz, aby oś X przechodziła od lewej do prawej), a nowa oś Y również zostanie odwrócona.

3) Upewnij się, że paski wyświetlają poprawnie

4) Dostosowanie legendy, jeśli istnieją problemy

To pytanie może pomóc w tym sensie, że pokazuje jak przejść od poziomych wykresów słupkowych do pionu: d3.js histogram with positive and negative values

Answer 3

Alternatywą jest obrócenie mapy (patrz this). Jest to trochę hacky, ponieważ musisz utrzymywać zamienione osie w głowie (wysokość jest w rzeczywistości szerokością itp.), Ale jest to prawdopodobnie prostsze, jeśli masz już działający pionowy wykres.

Przykład obracania wykresu znajduje się poniżej. Być może będziesz musiał również obrócić tekst, aby był przyjemny.

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

Answer 4

Kolejny interesujący poziomy wykres NVD3, który okazał się przydatny. Spróbuj.