Question

我开发了一个我的城市的交互式地图，但注意到我添加的图像没有出现在正确的位置，我添加了调整经度和经度的少量 - .005。这有效，但为什么我需要这样做？图像是否会影响定位？

 circles.selectAll("circle")
 .data(bottom)
 .enter()
.append("image")
.attr("xlink:href", function(bottom) { 
      return categoryTable [bottom.field_category];
}) // end attr
.attr("width", 32)
.attr("height", 32)
.attr("transform",function(bottom){
    return"translate("+projection([bottom.field_lng - .005,bottom.field_lat + .005])+")"; // adjust test
}) // end transform attr

Answer 1

基于@Lars的评论：

您不需要再次计算转换功能，因为您已经在投影方法中进行了转换。由于您知道图像的大小（以像素为单位），因此您可以知道以像素为单位的偏移量。只是不要通过投影方法运行该像素值。

您可以将两个偏移（长/纬度和居中）组合在一个大变换属性中，如下所示：

.attr("transform",function(bottom){
    return "translate (-16,-16) translate("
        + projection([bottom.field_lng,bottom.field_lat])+")"; // adjust test
}

但是，对于另一种类型的定位和翻译，使用图像的x和y属性（默认情况下均为零）可能更容易。像this fiddle这样的东西。

由于lat / long的数组格式和投影方法与translate方法的语法配合得很好，因此请保持原样并在创建图像对象时添加.attr("x", -16).attr("y", -16)。实际上，如果所有图像图标都具有相同的大小，您可以在代码顶部定义一个布局对象，并将其添加到一个属性语句中的对象中：

var imageAttributes = {height:32, width:32, x:-16, y:-16};

然后你的初始化代码是：

circles.selectAll("circle")
   .data(bottom)
 .enter()
   .append("image")
   .attr("xlink:href", function(bottom) { 
      return categoryTable [bottom.field_category];
   }) // end attr
   .attr(imageAttributes)
   .attr("transform",function(bottom){
       return "translate(" 
                + projection([bottom.field_lng,bottom.field_lat])+")"; 
   }) // end transform attr

D3 - 为什么在地图上绘制的圆圈没有出现在正确的位置？

1 个答案: