了解如何为比例选择范围

时间:2013-04-15 14:00:38

标签: d3.js

此代码和说明:

让我们生成基本的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])

我仍然无法理解他如何找出适合领域和规模范围的理由背后的理性?有人可以解释一下吗?

1 个答案:

答案 0 :(得分:1)

D3提供domainrange帮助程序,允许您将数据投影到某种画布上。 域定义您的输入,而范围定义输出

假设您有一组值,其中每个值介于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

进一步阅读: