D3js - 將垂直條形圖更改爲水平條形圖

Question

我有一個成對分組的垂直條形圖。我正在試圖如何水平翻轉它。在我的情況下，關鍵字會出現在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]) 
    ; 

Answer 1

昨天晚上我做了同樣的事情，基本上我最終重寫了代碼，因爲它比修復所有的錯誤更快，但這裏有我可以給你的提示。

翻轉X軸和Y軸的最大問題將是return h - yScale(d.global)，因爲高度是從頁面的「頂部」而不是底部計算的。

要記住的另一個關鍵問題是，當你設置.attr("x", ..)確保將其設置爲使= .attr("x", 0)"

我用這個教程來幫我想想我自己的代碼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()) 

Answer 2

這裏是我在這種情況下使用的程序：

1）逆所有X和Y

2）請記住，0 y是在頂部，因此您將不得不逆轉很多值，因爲y的前一個值將被反轉（您不希望x軸從左到右），並且新的y軸也會反轉。

3）確認條顯示正確

4）適應的傳說，如果有問題

這個問題可以在這個意義上幫助它展示瞭如何從水平條形圖去垂直：d3.js histogram with positive and negative values

Answer 3

另一種方法是旋轉圖表（請參見this）。這樣做有點不方便，因爲你需要維護頭部的交換軸（高度實際上就是寬度等），但是如果你已經有了一個可用的垂直圖表，這可以說更簡單一些。

旋轉圖表的一個示例如下。您可能還需要旋轉文本以使其更好。

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

Answer 4

另一個有趣的水平圖NVD3我覺得有用。試一試。