0

这段代码和解释：

让我们生成基本的 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 Viewport 的宽度是 400 个单位我们想将 0 到 100 (.domain([0, 100])) 的数字映射到 view port 的宽度 - 即 400 个单位 所以我们定义比例的范围作为 .range([0, 400])

我仍然无法理解他如何弄清楚为 Scale 的域和范围放置什么的原因？有人可以更好地解释一下吗？

4

1 回答 1

1

D3 提供了domain帮助range程序，允许您将数据投影到某种画布上。Domain 定义您的输入，而range 定义输出。

假设您有一组值，其中每个值都介于 0 和 100 之间。这是您的域，用 d3 表示为domain([0, 100])。现在假设您想以图形方式显示这些值。例如作为 svg 圆圈。您可以将您的值直接映射到像素（例如，值 10 转换为左 10 像素，上 10 像素），但您的 svg 容器可能更大，或小于 100 像素宽/高。

要利用可用空间，您需要定义范围。对于 500 像素宽和 300 像素高的 svg 容器，您的范围将是[0, 500]比例“x”和[0, 300]比例“y”（如果您从左上角开始绘制）。缩放值将适合这些范围。

这是一个例子：

var scale = d3.scale.linear().domain([0, 100]).range([0, 500]);

scale(0);   // 0
scale(100); // 500
scale(50);  // 250

scale(-1);  // -5

进一步阅读：

于 2013-04-15T15:10:25.627 回答