Question

我有缩放地图的问题。实际问题是，当我缩放地图时，使用笑脸在地图上显示的位置也可以缩放，但我不想放大笑脸。它可以保持相同的大小和地点。有时笑脸会重叠，所以为了避免这种情况，我试图解决上述问题，但我不知道如何在d3.js地图上包含转换属性，包括图像和文本等许多内容。请看看jsfiddle链接，你可以看到在日本3笑脸得到重叠并保持重叠，即使在缩放地图后。

我的JSfiddle link

我的代码如下：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
    height = 500;

var data = [
  {
    "code":"TYO",
    "city":"TOKYO",
    "country":"JAPAN",
    "lat":"35.68",
    "lon":"139.76"
  },
  {
    "code":"OSK",
    "city":"Osaka",
    "country":"JAPAN",
    "lat":" 34.40",
    "lon":"135.37"
  },
  {
    "code":"HISH",
    "city":"Hiroshima",
    "country":"JAPAN",
    "lat":"34.3853",
    "lon":"132.4553"
  },
  {
    "code":"BKK",
    "city":"BANGKOK",
    "country":"THAILAND",
    "lat":"13.75",
    "lon":"100.48"
  },
  {
    "code":"DEL",
    "city":"DELHI",
    "country":"INDIA",
    "lat":"29.01",
    "lon":"77.38"
  },
  {
    "code":"SEA",
    "city":"SEATTLE",
    "country":"USA",
    "lat":"38.680632",
    "lon":"-96.5001"
  }
];

var projection = d3.geo.mercator()
    .center([0, 5 ])
    .scale(200)
    .rotate([-180,0]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

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

var g = svg.append("g");

// load and display the World
d3.json("world-110m2.json", function(error, topology) {

// load and display the cities

function drawMap(data){

    var circle = g.selectAll("circle")
        .data(data)
        .enter()
        .append("g")

    circle.append("circle")
       .attr("cx", function(d) {
               return projection([d.lon, d.lat])[0];
       })
       .attr("cy", function(d) {
               return projection([d.lon, d.lat])[1];
       })
       .attr("r", 5)
       .style("fill", "red");

    circle.append("image")
            .attr("xlink:href", "http://fc08.deviantart.net/fs71/f/2013/354/8/7/blinking_smiley__animated__by_mondspeer-d6ylwn3.gif")//http://t2.gstatic.//com/images?q=tbn:ANd9GcT6fN48PEP2-z-JbutdhqfypsYdciYTAZEziHpBJZLAfM6rxqYX";})
            .attr("class", "node")
            .attr("x", function(d) {
                return (projection([d.lon, d.lat])[0]) - 8;
            })
            .attr("y", function(d) {
                return (projection([d.lon, d.lat])[1])-8;
            })
            .attr("width",20)
            .attr("height",20)
//});
}


g.selectAll("path")
      .data(topojson.object(topology, topology.objects.countries)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)

      drawMap(data);

});

// zoom and pan
var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+ 
            d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        g.selectAll("circle")
            .attr("d", path.projection(projection));
        g.selectAll("path")  
            .attr("d", path.projection(projection)); 

  });

svg.call(zoom)

</script>
</body>
</html>

任何身体帮我缩放地图图片而不是笑脸

Answer 1

实现语义缩放:)

尝试使用此示例更改代码:)：

Semantic zoom on map with circle showing capital

JSFIDDLE：http://jsfiddle.net/xf7222dg/2/

下面的代码缩小了＆＃39;圈子＆＃39;取决于规模

var zoom = d3.behavior.zoom()
  .on("zoom",function() {
     g.attr("transform","translate("+ 
        d3.event.translate.join(",")+")scale("+d3.event.scale+")");
     g.selectAll("circle")
      .attr("r", function(){
        var self = d3.select(this);
        var r = 8 / d3.event.scale;  // set radius according to scale
        self.style("stroke-width", r < 4 ? (r < 2 ? 0.5 : 1) : 2);  // scale stroke-width
        return r;
    });
});

这是与你的笑脸合作：http://jsfiddle.net/dmn0d11f/7/

你必须改变宽度＆＃39;节点（图像）不是像圆圈一样的半径。因此，选择节点，而不是更改＆＃39; r＆＃39;改变宽度＆＃39; ：

g.selectAll(".node")
      .attr("width", function(){
        var self = d3.select(this);
        var r = 28 / d3.event.scale;  // set radius according to scale
        self.style("stroke-width", r < 4 ? (r < 2 ? 0.5 : 1) : 2);  // scale stroke-width
        return r;
    });

如何只缩放地图和笑脸可以保持相同的地方和大小

1 个答案: