Question

我试图在地图上绘制一些点。我的地图是一个单独生成的svg（在PATH_PARAM文件中）。它应该作为背景，细节必须在最终图中的特定坐标处。即使它不完全是你可以想象地图是我自己追踪的一张脸的图片（所以我知道它的大小以及地图中的每个元素在哪里参考）并且我想要添加点用D3.js将它导入我的svg后正好在眼睛中间。

现在我只需将它附加到svg，就像这样:(在加载页面时调用此javascript）

var SIZE_PARAM = 200;
var DATA_PARAM = [{position: [0,1]}, {position: [4,5]}] //actually it's a far more bigger set of points.
var graph = d3.select("#graph");
svg = graph.append("svg")
    .attr("width",window.innerWidth)
    .attr("height",window.innerHeight)
    .call(d3.behavior.zoom().on("zoom", 
        function () {svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")}
    ))
    .append("g");


background = svg.selectAll("image")
    .data([0])
    .enter()
    .append("svg:image");
background.attr("xlink:href", PATH_PARAM)
    .attr("width",SIZE_PARAM)
    .attr("height",SIZE_PARAM);


scale = d3.scale.linear()
    .domain([dom_x_min, dom_x_max])
    .rangeRound([ 0, SIZE_PARAM ])
    .clamp(true);


circles = svg.selectAll("circle")
    .data(DATA_PARAM)
    .enter()
    .append("circle");
circles.attr("class", "point")
    .attr("cx", function(d,i) {return scale(d.position[0]);})
    .attr("cy", function(d,i) {return scale(d.position[1]);})
    .attr("r", function(d,i) {return 1;})

我遇到的问题是地图和点与地图不同步。点之间的相对位置很好，我设法通过设置唯一的SIZE_PARAM参数来为地图和点设置相同的比例，但是点和地图之间存在平移。对于少数几个点（如示例中的两个点），此转换不可见，但随着此数字的增加，这种转换会越来越明显。

根据一些建议，我将其添加到CSS：

#graph * {
    position: absolute;
    top: 0px;
    left: 0px;
}

但它并没有解决我的问题。

如何将地图与积分同步？

使用D3js

0 个答案: