Question

此代码和说明：

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

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

Answer 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

进一步阅读：

了解如何为比例选择范围

1 个答案: