我的方法有效,但我想知道是否有更好的方法。
我有this页面作为我的工作示例。源代码是here这个问题专门针对正值和负值绘制 x 轴和 y 轴。
我有一个看起来像这样的 drawAxes
方法:
drawAxes(data) {
const xAxis = d3.svg.axis()
.scale(this.xScale);
const yAxis = d3.svg.axis()
.orient('left')
.scale(this.yScale);
const dimensions = this.getDimensions();
this.xScale.domain(d3.extent(data, (d) => d.x));
const minY = d3.min(data, (d) => d.y);
const maxY = d3.max(data, (d) => d.y);
const nonNegativeXAxis = minY >= 0 && maxY >= 0;
const positiveAndNegativeXAxis = minY < 0 && maxY > 0;
let yScaleDomain, xAxisPosition;
if(nonNegativeXAxis) {
yScaleDomain = [0, d3.max(data, (d) => d.y)];
} else {
yScaleDomain = d3.extent(data, (d) => d.y);
}
this.yScale.domain(yScaleDomain);
const findZeroTick = (data) => {
return data === 0;
};
this.svg.append('g')
.attr('class', 'axis y-axis')
.style('visibility', 'hidden')
.call(yAxis);
if(nonNegativeXAxis) {
yScaleDomain = [0, d3.max(data, (d) => d.y)];
xAxisPosition = dimensions.height;
} else if(positiveAndNegativeXAxis) {
xAxisPosition = this.svg.selectAll(".tick").filter(findZeroTick).map((tick) => {
return d3.transform(d3.select(tick[0]).attr('transform')).translate[1];
});
} else {
yScaleDomain = d3.extent(data, (d) => d.y);
xAxisPosition = 0;
}
this.svg.append('g')
.attr('class', 'axis x-axis')
.attr('transform', `translate(0, ${xAxisPosition})`)
.call(xAxis);
d3.select('.y-axis').remove();
const minX = d3.min(data, (d) => d.x);
const maxX = d3.max(data, (d) => d.y);
const positiveXOnly = minX > 0 && maxX > 0;
const negativeXOnly = minX < 0 && maxX < 0;
let yAxisPosition;
if(positiveXOnly) {
yAxisPosition = 0;
} else if(negativeXOnly) {
yAxisPosition = dimensions.width;
} else {
yAxisPosition = this.svg.selectAll(".x-axis .tick").filter(findZeroTick).map((tick) => {
return d3.transform(d3.select(tick[0]).attr('transform')).translate[0];
});
}
this.svg.append('g')
.attr('class', 'axis y-axis')
.attr('transform', `translate(${yAxisPosition}, 0)`)
.call(yAxis);
}
我发现最大的困难是将 y 轴 x 轴定位在相反轴上的 0 处。
我的做法是首先绘制 y 轴但将其隐藏:
this.svg.append('g')
.attr('class', 'axis y-axis')
.style('visibility', 'hidden')
.call(yAxis);
然后我通过选择所有刻度并找到 0 刻度的 y 坐标找到 0 在 y 轴上的位置,我使用这个值来定位 x 轴:
const findZeroTick = (data) => {
return data === 0;
};
xAxisPosition = this.svg.selectAll(".tick").filter(findZeroTick).map((tick) => {
return d3.transform(d3.select(tick[0]).attr('transform')).translate[1];
});
this.svg.append('g')
.attr('class', 'axis x-axis')
.attr('transform', `translate(0, ${xAxisPosition})`)
.call(xAxis);
为了定位 yAxis,我首先删除 yAxis,然后通过选择 x 轴上的所有刻度进行类似的计算,然后再次添加 yAxis 并使用检索到的值来定位 yAxis:
d3.select('.y-axis').remove();
yAxisPosition = this.svg.selectAll(".x-axis .tick").filter(findZeroTick).map((tick) => {
return d3.transform(d3.select(tick[0]).attr('transform')).translate[0];
});
this.svg.append('g')
.attr('class', 'axis y-axis')
.attr('transform', `translate(${yAxisPosition}, 0)`)
.call(yAxis);
是否有更有效的方法来实现相同的结果或失败,我可以移动轴而不必删除它并重新添加它吗?
最佳答案
只要您的线性比例尺具有域和范围,您就可以使用它来获取任何域值的像素值。例如,要获取点 (0 , 0) 的像素,您需要使用 xScale(0)
和 yScale(0)
。
如果这些值位于定义的范围之外(读作:svg Canvas 尺寸(以像素为单位)),您知道 Y 轴应该分别位于最左边或最右边(最小或最大范围加上边距)。
关于d3.js - 使用 d3.js 定位 xAxis 和 yAxis,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35133700/