Question

我看到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数组中的实际值相等。{/ p>

我想做的是将两个数组传递给d3.svg.line()，比如说distance和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));

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

Answer 1

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

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

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

将数据转换为一组您希望以此为基础的数据点。
使用线生成器访问器函数将这些数据点投影到绘图系统的坐标（即像素位置）上。

如何将不同的数组传递给d3.svg.line（）函数？

1 个答案: