gpt4 book ai didi

javascript - d3.js 如何区分 X 轴和 Y 轴?

转载 作者:行者123 更新时间:2023-11-27 23:19:35 28 4
gpt4 key购买 nike

最近在学习d3,遇到一个小问题:当人们创建x轴和y轴时,如何从代码中判断先创建哪个轴?

例如:

          .......
.......

//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);


.......
.......
//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);

//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);


.......
.......

//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);

//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);

对于这段代码,我无法真正找到创建 x 轴或 y 轴之间的区别?是因为变换函数吗?然而,当我删除 x 和 y 的变换函数时,x 回到顶部,而 y 消失,到底发生了什么?有默认功能吗?

代码来源:http://alignedleft.com/content/03-tutorials/01-d3/160-axes/6.html作者:斯科特·默里。

最佳答案

首先创建的轴是第一个调用的轴(使用 .call()),在本例中是 x 轴。轴的位置取决于方向和所应用的变换。方向可以是“底部”、“顶部”、“左”或“右”。底部和顶部指定水平轴,刻度分别位于轴的上方或下方,而左和右指定垂直轴,刻度分别位于轴的左侧或右侧。 d3 不知道哪个是 x 轴,哪个是 y 轴。它只是知道有轴并将它们绘制在 .orient 和转换告诉它的位置。当然,人们倾向于将水平轴称为“xAxis”或类似的名称,但您可以将其称为“yAxis”,它仍然会被绘制为水平轴。变换定位轴。因此,如果删除 x 轴的变换,它将不再从顶部向下变换“h - padding”像素,而是会出现在其容器的顶部。如果删除 y 轴的变换,它将绘制在容器的 (0,0) 处,即左上角,并将向上延伸,但您将看不到它,因为它将延伸到容器之外容器的可见区域。

请参阅此处了解更多详细信息:https://github.com/mbostock/d3/wiki/SVG-Axes

关于javascript - d3.js 如何区分 X 轴和 Y 轴?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35495446/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com