使用d3.js将x轴移动到图表上的坐标(0,0) [英] move x axis to coordinate (0,0) on the chart with d3.js
本文介绍了使用d3.js将x轴移动到图表上的坐标(0,0)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
您可以在此页面上看到我要实现的目标的一个示例.
You can see an example of what I am trying to achieve on this page.
我用此代码构造了负轴和正轴:
I have negative and positive axis constructed with this code:
this.svg = d3.select(el).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
this.xScale = d3.scale.linear()
.range([0, width]);
this.yScale = d3.scale.linear()
.range([height, 0]);
const xAxis = d3.svg.axis()
.scale(this.xScale);
const yAxis = d3.svg.axis()
.orient('left')
.scale(this.yScale);
const data = this.getDataFromProps(this.props.expression);
this.xScale.domain(d3.extent(data, function (d) {return d.x;}));
this.yScale.domain(d3.extent(data, function (d) {return d.y;}));
this.svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
this.svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(' + width/2 + ',0)')
.call(yAxis);
唯一的问题是x轴指向底部.如何将轴定位在svg的(0,0)?
The only problem is that the x-axis is oriented to the bottom. How can I have the axis positioned at (0, 0) on the svg?
推荐答案
只需对此行进行更改:
this.svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0,' + (height/2) + ')')
.call(xAxis);
将翻译转换为svg高度的一半.
Make the translate to half of the height of svg.
这篇关于使用d3.js将x轴移动到图表上的坐标(0,0)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文