Javascript D3：覆盖Svg和画布：地理投影
我正在绘制一张NYC（交互式svg）地图，需要将其覆盖在具有数千个点的画布上。使用我能够实现几乎我想要的：有一个覆盖和点是可见的 但是，尽管在svg中使用相同的投影和画布，并且具有相同的宽度和高度，但点与svg边界的偏移量是特定的： 即使调整大小，这个偏移量仍然存在，我无法得到哪里有错误。 以下是我的代码片段：Javascript D3：覆盖Svg和画布：地理投影,javascript,d3.js,canvas,svg,Javascript,D3.js,Canvas,Svg,我正在绘制一张NYC（交互式svg）地图，需要将其覆盖在具有数千个点的画布上。使用我能够实现几乎我想要的：有一个覆盖和点是可见的 但是，尽管在svg中使用相同的投影和画布，并且具有相同的宽度和高度，但点与svg边界的偏移量是特定的： 即使调整大小，这个偏移量仍然存在，我无法得到哪里有错误。 以下是我的代码片段： var projection = d3.geoMercator() .center([-73.98, 40.72]) .scale(width * 74) .t
var projection = d3.geoMercator()
.center([-73.98, 40.72])
.scale(width * 74)
.translate([(width) / 2, (height) / 2]);
...
var svg = d3.select("#svg-container")
.append("svg")
.attr("class", "map");
// CANVAS PART
var foreignObject = svg.append("foreignObject")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("class", "overlay");
// add embedded body to foreign object
var foBody = foreignObject.append("xhtml:body")
.style("margin", "0px")
.style("padding", "0px")
.style("background-color", "none")
.style("width", width + "px")
.style("height", height + "px");
// add embedded canvas to embedded body
var canvas = foBody.append("canvas")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
// Points
context.clearRect(0, 0, width, height);
context.globalAlpha = .8;
userpoints.forEach(function(d, i) {
var crd = projection([d.lat, d.lon]);
// console.log(crd, );
context.beginPath();
context.rect(crd[0], crd[1], 1, 1);
context.fillStyle=comm_colors[d.Community];
context.closePath();
context.fill();
<svg class="map">
<foreignObject x="0" y="0" width="1036.962" height="1010" class="overlay" style="visibility: visible;">
<body style="margin: 0px; padding: 0px; width: 1036.96px; height: 1010px;">
<canvas x="0" y="0" width="1036.962" height="1010"></canvas>
</body>
</foreignObject>
<g id="boros"></g>
<g id="cts">
<path> ...
</path>
</g>
<defs>
<pattern id="lzssi" patternUnits="userSpaceOnUse" width="3" height="3"><rect width="3" height="3" fill="grey"></rect><path d="M 0,3 l 3,-3 M -0.75,0.75 l 1.5,-1.5
M 2.25,3.75 l 1.5,-1.5" stroke-width="0.5" shape-rendering="auto" stroke="white" stroke-linecap="square"></path>
</pattern>
</defs>
</svg>
...