反转 Y 轴 D3 [英] reversed Y-axis D3
问题描述
我创建了一个条形图,但我的 Y 轴以某种方式反转了(似乎比例也不正确).我一个人实在想不通.这是 Jsfiddle 的链接.
I created a bar plot and my Y axis is reversed somehow (also seems like the scale is not right). I really couldn't figure it out by myself. Here is the link for Jsfiddle.
这是我正在编写的代码,以防您想在其他地方尝试.
This is the code I am working on, in case you want to try it elsewhere.
var w = 700;
var h = 400;
var margin = 40;
var dataset = [
{key:1,value:4000},
{key:2,value:3500},
{key:3,value:4400},
{key:4,value:3250},
{key:5,value:4785},
{key:6,value:3600},
{key:7,value:3200}
];
var key = function(d) {
return d.key;
};
var value = function(d) {
return d.value;
};
console.log(dataset);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length+1))
.rangeRoundBands([40, w], 0.05);
var yScale = d3.scale.linear()
.domain([0, 5000])
.range([0, h-40]);
var x_axis = d3.svg.axis().scale(xScale);
var y_axis = d3.svg.axis().scale(yScale).orient("left");
d3.select("svg")
.append("g")
.attr("class","x axis")
.attr("transform","translate(0,"+(h-margin)+")")
.call(x_axis);
d3.select("svg")
.append("g")
.attr("class","y axis")
.attr("transform","translate("+margin+",0)")
.call(y_axis);
//Create bars
svg.selectAll("rect")
.data(dataset, key)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d.value);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d.value)-margin;
})
.attr("fill", function(d) {
return "rgb(96, 0, " + (d.value * 10) + ")";
})
//Tooltip
.on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
var yPosition = parseFloat(d3.select(this).attr("y")) + 14;
//Update Tooltip Position & value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(d.value);
d3.select("#tooltip").classed("hidden", false)
})
.on("mouseout", function() {
//Remove the tooltip
d3.select("#tooltip").classed("hidden", true);
}) ;
//Create labels
svg.selectAll("text")
.data(dataset, key)
.enter()
.append("text")
.text(function(d) {
return d.value;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d.value) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
推荐答案
也许这会有所帮助.
一些注意事项:
我将您的 y 域范围从
.range([0, h-margin]);
反转为.range([h-margin, 0]);
这将解决 y 轴标记方向错误的问题,因为浏览器认为原点(0,0)
指向左上角,而不是底部-像数学一样的左角.
I reversed your y domain range from
.range([0, h-margin]);
to.range([h-margin, 0]);
This will fix the issue of the y-axis marks going in the wrong direction because the browser consider's the origin(0,0)
point to the the upper-left corner, and not the bottom-left corner like in math.
因为这个逆转,我不得不调整你的 .attr('height')
和 .attr('y')
.
Because of this reversal I had to tweak your .attr('height')
and .attr('y')
.
在条形图中找到条形高度的一个好方法是认识到 yscale(0)
将提供条形图底部的像素位置.然后,您可以执行 yscale(value) - yscale(0)
来获取条形的像素高度.
A nice way to find the height of bar in a bar chart is to realize that the yscale(0)
will give you the pixel-position of the bottom of the barchart. You can then do yscale(value) - yscale(0)
to get the pixel-height of your bars.
这篇关于反转 Y 轴 D3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!