Javascript D3js-将垂直条形图更改为水平条形图
我有一个垂直条形图,它是成对分组的。我试着玩弄如何水平翻转它。在我的例子中,关键字将显示在y轴上,比例将显示在x轴上 我试着切换各种x/y变量,但那当然只会产生令人讨厌的结果。为了将代码从垂直条切换到水平条,我需要关注代码的哪些方面Javascript D3js-将垂直条形图更改为水平条形图,javascript,d3.js,bar-chart,Javascript,D3.js,Bar Chart,我有一个垂直条形图,它是成对分组的。我试着玩弄如何水平翻转它。在我的例子中,关键字将显示在y轴上,比例将显示在x轴上 我试着切换各种x/y变量,但那当然只会产生令人讨厌的结果。为了将代码从垂直条切换到水平条,我需要关注代码的哪些方面 var xScale = d3.scale.ordinal() .domain(d3.range(dataset.length)) .rangeRoundBands([0, w], 0.05); // ternary operator to de
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])
;
以下是我在这种情况下使用的程序: 1) 反转所有X和Y 2) 请记住,y的0位于顶部,因此您必须反转许多值,因为y的先前值将反转(您不希望x轴从左向右移动),并且新的y轴也将反转 3) 确保条形图显示正确 4) 如果有问题,请修改图例
这个问题可能会有所帮助,因为它展示了如何从水平条形图到垂直条形图:我昨天晚上做了同样的事情,我基本上重写了代码,因为这比修复所有bug都要快,但下面是我可以给你的提示 翻转x轴和y轴的最大问题是
返回h-yScale(d.global)
,因为高度是从页面的“顶部”而不是底部计算的
另一个需要记住的关键点是,当您设置.attr(“x”,0)
时,请确保将其设置为0(加上左侧的任何填充),以便=.attr(“x”,0)
我用这个教程来帮助我用水平条来思考自己的代码,这真的很有帮助
下面是我自己的代码,如果有帮助的话,可以使其水平:
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())
另一种方法是旋转图表(请参阅)。这有点麻烦,因为你需要在头脑中保持交换的轴(高度实际上是宽度等),但如果你已经有了一个工作的垂直图表,这可能会更简单 下面是一个旋转图表的示例。您可能还需要旋转文本以使其美观
_chart.select('g').attr("transform","rotate(90 200 200)");
另一个有趣的水平图,我发现它很有用。试试看。你也可以参考它,它包含带有工具提示和图例的水平条形图,而且它在手机中也很有用