本文介绍了D3 Y轴似乎反转的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试根据CSV文件中的某些数据生成图形.
I am trying to generate a graph based on some data from a CSV file.
我的代码:
<script>
var svg = d3.select("body").append("svg")
.attr("width", 1000)
.attr("height", 1000);
function render(data){
var circles = svg.selectAll("circle").data(data);
circles.enter().append("circle")
.attr("r", 1);
circles
.attr("cx", function (d){return d[' Monthly Term']})
.attr("cy", function (d){ return d[' Principal Balance']/1000});
circles.exit().remove();
}
d3.csv("{% static "data/Total.csv" %}" , type, function(myArray){
render(myArray);
myArray.forEach(function(d){
console.log(d[' Principal Payment'] + ", " + d[' Interest Payment'] + ", " + d[' Principal Balance'] + ", " +d[' Monthly Term']);
});
});
function type(d){
d.value = +d.value;
return d;
}
</script>
一切正常,但Y轴似乎相反.
Everything "works" but the Y-axis seems reversed.
不确定你们是否可以看到检查窗口,但是Y值应该随着x值的增加而减小.
Not sure if you guys can see the inspection window but the Y-value should be decreasing as x value increases.
有什么想法吗?
推荐答案
在控制台输出中,Y值随着X值的增加而减小.在SVG中,0,0位置在左上方.因此,较低的Y值更接近屏幕顶部.尝试反转Y值:
In your console output, the Y value is decreasing as X value increases. In an SVG, the 0,0 location is top left. So a lower Y value is closer to the top of the screen. Try inverting the Y value:
.attr("cy", function (d){ return height - d[' Principal Balance']/1000});
这篇关于D3 Y轴似乎反转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!