D3js – 将垂直条形图更改为水平条形图
我有一个成对分组的垂直条形图。 我试图玩弄如何水平翻转它。 在我的情况下，关键字会出现在y轴上，而比例会出现在x轴上。
我尝试过切换各种x / yvariables，但这当然只是产生了时髦的结果。 我需要关注哪些代码区域，以便将其从竖线切换到横线？
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]) ;
我昨天刚刚做了同样的事情，基本上我最终重写了代码，因为它比修复所有的错误更快，但这里是我可以给你的提示。
翻转x轴和y轴的最大问题是return h - yScale(d.global)因为高度是从页面的“顶部”而不是底部计算的。
另一个要记住的关键是，当你设置.attr("x", ..)确保你把它设置为0（加上任何填充左侧）所以= .attr("x", 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())
另一种方法是旋转图表（请参阅此 ）。 这是一个有点hacky，那么你需要维护头部交换轴（高度实际上是宽度等），但它可以说是更简单，如果你已经有一个工作的垂直图。
旋转图表的一个例子如下。 您可能还需要旋转文本以使其更好。
_chart.select('g').attr("transform","rotate(90 200 200)");
这里是我在这种情况下使用的程序：
1）反转所有的X和Y
2）记住y的0是最上面的，所以你将不得不逆转很多值，因为y的前一个值将被颠倒（你不希望你的x轴从左到右）和新的y轴也会倒转。
3）确保条显示正确
4）如果出现问题，请调整图例
这个问题可能有助于说明如何从水平条形图到垂直： d3.js带有正值和负值的直方图
另一个有趣的水平图NVD3 ，我觉得有用。 试一试。
