此代码和说明:
让我们生成基本的SVG视口并将其用作我们的选择:
//Create the SVG Viewport selection
var svgContainer = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 100);
//Create the Scale we will use for the Axis
var axisScale = d3.scale.linear()
.domain([0, 100])
.range([0, 400]);
//Create the Axis
var xAxis = d3.svg.axis()
.scale(axisScale);
在我们继续之前需要注意三件事:
SVG视口的宽度为400个单位 我们想要映射0到100的数字(.domain([0,100])) 在视口的宽度上 - 这是400个单位 因此我们将比例范围定义为.range([0,400])
我仍然无法理解他如何找出适合领域和规模范围的理由背后的理性?有人可以解释一下吗?
答案 0 :(得分:1)
D3提供domain
和range
帮助程序,允许您将数据投影到某种画布上。 域定义您的输入,而范围定义输出。
假设您有一组值,其中每个值介于0和100之间。这是您的域,以d3表示为domain([0, 100])
。现在假设您想以图形方式显示这些值。例如作为svg圈子。您可以将值直接映射到像素(例如,值10转换为10px左,10px顶部),但您的svg容器可能更大,或小于100px宽/高。
要使用可用空间,请定义范围。对于500px宽和300px高的svg容器,对于刻度“x”,您的范围将是[0, 500]
,对于刻度“y”,您的范围将是[0, 300]
(如果您从左上角开始绘制)。缩放值将适合这些范围。
以下是一个例子:
var scale = d3.scale.linear().domain([0, 100]).range([0, 500]);
scale(0); // 0
scale(100); // 500
scale(50); // 250
scale(-1); // -5
进一步阅读: