如何使用 moveTo 函数在画布上定位 D3 路径？答案

【问题标题】：How to position a D3 path on a canvas using the moveTo function?如何使用 moveTo 函数在画布上定位 D3 路径？
【发布时间】：2014-07-08 19:56:39
【问题描述】：

我正在使用 D3.js 解析一些 geoJson 文件并将它们显示在画布上。但是，我正在努力使用在使用 HTML5 画布时使用的 moveTo() 函数 id 来定位它们。

D3 docs say:

path.context([上下文])

如果指定了上下文，则设置渲染上下文并返回路径发电机。如果上下文为空，则路径生成器将返回在给定功能上调用时的 SVG 路径字符串。如果上下文是非空，路径生成器将改为调用指定的上下文来渲染几何。上下文必须实现以下方法：

开始路径()
移动到(x, y)
lineTo(x, y)
弧（x，y，半径，startAngle，endAngle）
关闭路径（）

请注意，这是画布的子集元素的 2D 渲染上下文，因此画布上下文可以是传递给路径生成器，在这种情况下将渲染几何图形直接到画布上。如果未指定上下文，则返回当前渲染上下文，默认为 null。

所以我知道我可以将画布的上下文传递给 path，但迄今为止我没有任何成功 - 我的输出始终位于 0,0。

我的代码如下：

var files = ["file-a.geojson", "file-b.geojson", "file-c.gpx.geojson"];

    var canvas = d3.select("body").append("canvas")
        .attr("style", "outline: thin solid red;")
        .attr("width", "1052")
        .attr("height", "1488");

    var context = canvas.node().getContext("2d");

    var routeWidth = 105,
        routeHeight = 105;

    for (var i=0;i<files.length;i++){
      d3.json("example-data/"+files[i], function(error, data) {

        var projection = d3.geo.mercator()
            .scale(1)
            .translate([0, 0]);

        var path = d3.geo.path()
            .projection(projection);

        var b = path.bounds(data),
            s = 0.95 / Math.max((b[1][0] - b[0][0]) / routeWidth, (b[1][1] - b[0][1]) / routeHeight),
            t = [(routeWidth - s * (b[1][0] + b[0][0])) / 2, (routeHeight - s * (b[1][1] + b[0][1])) / 2];

        projection
          .scale(s)
          .translate(t);

        context.beginPath();
        context.moveTo(300, 300);
        path.context(context)(data);
        context.stroke();
        context.closePath();
      });
    };

所以我的问题是，当我遍历它们时，如何将每个 path 定位在我的画布上？

【问题讨论】：

这样做的方法是让几个canvas 元素定位适当。 D3 路径生成器在您调用它时会启动一条新路径。
@LarsKotthoff 感谢您为我指明了正确的方向。我不知道我可以将多个画布元素“缝合”在一起。这是我采取的方法。如果您想添加您的建议作为答案，我很乐意将其标记为正确。

标签： javascript html canvas d3.js geojson

【解决方案1】：

D3 画布路径生成器在调用时会启动一个新路径，因此没有简单的方法来偏移起始位置。但是，您可以有多个重叠的 canvas 元素，您可以适当地定位它们。这样，每条路径都会从您希望它开始的地方开始。

【讨论】：

【解决方案2】：

不要在循环中调用 context.moveTo(300, 300)，而是在循环之前调用 context.translate(300, 300)。

【讨论】：