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我觉得有用。试一试。