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", ..)时，确保将其设置为0(加上左侧的填充)so = .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())

Answer 2

另一种选择是旋转图表(参见this)。这有点粗糙，因为你需要在你的头脑中保持交换的轴(高度实际上是宽度等)，但如果你已经有一个工作的垂直图表，它可以说是更简单的。

下面是一个旋转图表的例子。你可能还需要旋转文本来使它好看。

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

Answer 3

下面是我在这种情况下使用的过程:

1)所有x和y逆

2)记住，y的0在上面，因此你将不得不逆很多值，因为之前的y值将被反转(你不希望你的x轴从左到右)，新的y轴也将被反转。

3)确保栏显示正确

4)如果有问题改编图例

这个问题可能会有所帮助，因为它显示了如何从水平条形图到垂直的d3.js直方图的正负值