0

我见过一个例子d3.svg.line()如下：

        var altitude = some_array()  // I read this from a .json file

        y = d3.scale.linear().domain([0, d3.max(altitude)]).range([0 + margin, h - margin]),
        x = d3.scale.linear().domain([0, altitude]).range([0 + margin, w - margin])

        var line = d3.svg.line()
            .x(function(d,i) { return x(i); })
            .y(function(d) { return -1 * y(d); })

        some_svg_group.append("svg:path").attr("d", line(altitude));

虽然我不太了解实际发生的情况，但我知道这是一种生成器函数，其中line().x和line().y是一种生成器函数，并且所示的成语是一种具有等距x数组与实际值的方法y大批。

不过，我想做的是将两个数组传递给d3.svg.line()，比如distanceand altitude，或多或少像这样：

var line = d3.svg.line()
    .x(function_that_gives_distance)
    .y(function_that_fives_altitude)

some_svg_group.append("svg:path").attr("something", line(some_other_thing));

关于用什么替换这些占位符有什么建议吗？或者，如果他们错了，如何实现呢？

4

1 回答 1

1

line.x并且line.y实际上是访问者。传入线生成器的数组表示一组数据点，访问器函数用于将每个数据点映射到适当的 x 和 y 像素坐标上。

因此，考虑到这一点，使用 2 个单独的数组表示相同的数据点可能没有意义。您应该尝试提前将distance和altitude转换为单个数据点数组。然后，您可以定义您的x和y访问器以将数据点上的属性映射到正确的像素位置。使用您的占位符术语，我认为function_that_gives_distance并且function_that_gives_altitude实际上会作为数据点构造的一部分被调用，而不是在行生成器的访问器中。

总而言之，将工作流程分为两个步骤：

  1. 将数据转换为您想要作为线条基础的一组数据点。
  2. 使用线生成器访问器函数将这些数据点投影到绘图系统的坐标（即像素位置）上。
于 2013-09-12T01:18:24.550 回答