javascript D3js - 将垂直条形图更改为水平条形图

D3js - change Vertical bar chart to Horizontal bar chart

提问by EnigmaRM

I have a vertical bar chart that is grouped in pairs. I was trying to play around with how to flip it horizontally. In my case, the keywords would appear on the y axis, and the scale would appear on the x-axis.

我有一个成对分组的垂直条形图。我试图玩弄如何水平翻转它。在我的例子中，关键字会出现在 y 轴上，而比例尺会出现在 x 轴上。

I tried switching various x/y variables, but that of course just produced funky results. Which areas of my code do I need to focus on in order to switch it from vertical bars to horizontal ones?

我尝试切换各种 x/y 变量，但这当然只会产生奇怪的结果。我需要关注代码的哪些区域才能将其从垂直条切换到水平条？

My JSFiddle: Full Code

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

采纳答案by Mike

I just did the same thing last night, and I basically ended up rewriting the code as it was quicker than fixing all the bugs but here's the tips I can give you.

我昨晚刚刚做了同样的事情，我基本上最终重写了代码，因为它比修复所有错误更快，但这里是我可以给你的提示。

The biggest issues with flipping the x and y axis will be with things like return h - yScale(d.global)because height is calculated from the "top" of the page not the bottom.

翻转 x 和 y 轴的最大问题将是return h - yScale(d.global)因为高度是从页面的“顶部”而不是底部计算的。

Another key thing to remember is that when you set .attr("x", ..)make sure you set it to 0 (plus any padding for the left side) so = .attr("x", 0)"

另一个要记住的关键是，当你设置时，请.attr("x", ..)确保将其设置为 0（加上左侧的任何填充）所以 =.attr("x", 0)"

I used this tutorial to help me think about my own code in terms of horizontal bars instead - it really helped

我使用本教程来帮助我从水平条的角度思考我自己的代码 - 它真的很有帮助

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

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

here's my own code making it horizontal if it helps:

如果有帮助，这是我自己的代码，使其水平：

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

回答by mmmdreg

An alternative is to rotate the chart (see this). This is a bit hacky as then you need to maintain the swapped axes in your head (the height is actually the width etc), but it is arguably simpler if you already have a working vertical chart.

另一种方法是旋转图表（请参阅此）。这有点麻烦，因为您需要在头脑中保持交换的轴（高度实际上是宽度等），但如果您已经有一个工作垂直图表，它可以说更简单。

An example of rotating the chart is below. You might need to rotate the text as well to make it nice.

下面是旋转图表的示例。您可能还需要旋转文本以使其美观。

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

回答by Christopher Chiche

Here is the procedure I use in this case:

这是我在这种情况下使用的程序：

1) Inverse all Xs and Ys

1) 反转所有 X 和 Y

2) Remember that the 0 for y is on top, thus you will have to inverse lots of values as previous values for y will be inversed (you don't want your x axis to go from left to right) and the new y axis will be inversed too.

2）请记住，y 的 0 位于顶部，因此您必须反转许多值，因为 y 的先前值将被反转（您不希望 x 轴从左向右移动）和新的 y 轴也会反转。

3) Make sure the bars display correctly

3) 确保条形显示正确

4) Adapt legends if there are problems

4）如果有问题，调整图例

This question may help in the sense that it shows how to go from horizontal bar charts to vertical: d3.js histogram with positive and negative values

这个问题可能会有所帮助，因为它显示了如何从水平条形图到垂直条形图：d3.js histogram with positive and negative values

回答by Free-Minded

Another Interesting Horizontal Graph NVD3which I found useful. Give it a Try.

我发现另一个有趣的水平图NVD3很有用。试一试。