path.context（[上下文]）

Question

我使用D3.js解析一些geoJson文件并在画布上显示它们。但是，我正在努力使用moveTo（）函数来定位它们，这些函数在处理HTML5画布时会使用。

path.context（[上下文]）

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

beginPath方法（）
  moveTo（x，y）
  lineTo（x，y）
  arc（x，y，radius，startAngle，endAngle）
  closePath（）

请注意，这是画布的子集   元素的2D渲染上下文，因此画布上下文可以   传递给路径生成器，在这种情况下将呈现几何体   直接到画布。如果未指定context，则返回   当前渲染上下文，默认为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放在我的画布上？

Answer 1

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

Answer 2

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

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

path.context（[上下文]）

2 个答案: