Question

我正在调整http://bl.ocks.org/mbostock/2206340处的可缩放和可点击地图，以绘制一些点并做其他一些事情。现在，我试图让它在缩放和点击动作中，绘制的点也移动/尊重缩放。我不确定这里的代码是什么错误，因为我似乎在缩放+点击中调用red.circle和blue.circle对象 - 任何人都可以识别问题吗？谢谢！ data.csv的格式如下：

lon_0,lat_0,lon_1,lat_1
-122.1430195,37.4418834,-122.415278,37.778643
-122.1430195,37.4418834,-122.40815,37.785034
-122.4194155,37.7749295,-122.4330827,37.7851673
-122.4194155,37.7749295,-122.4330827,37.7851673
-118.4911912,34.0194543,-118.3672828,33.9164666
-121.8374777,39.7284944,-121.8498415,39.7241178
-115.172816,36.114646,-115.078011,36.1586877

这是d3.js脚本。

.background {
  fill: none;
  pointer-events: all; 
}

#states path {
  fill: #aaa;
  stroke: #fff;
  stroke-width: 1.5px;
}

#states path:hover {
  stroke: white;
}

</style>
<body>
<script>

var width = 1920/2,
    height = 1000/2;

var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([width / 2, height / 2]);

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

var zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scale(projection.scale())
    .scaleExtent([height, 50 * height])
    .on("zoom", zoom);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("style", "stroke:black; stroke-width:2px");

var states = svg.append("g")
    .attr("id", "states")
    .call(zoom);

var dataset = [];


states.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height);

d3.json("us-states.json", function(json) {

  states.selectAll("path")
      .data(json.features)
    .enter().append("path")
      .attr("d", path)
      .on("click", click);

 d3.csv("data.csv", function(data) {
   states.selectAll(".blue.circle")
     .data(data)
     .enter()
     .append("circle")
     .attr("cx", function(d) {
               return projection([d["lon_0"], d["lat_0"] ])[0];
               })
     .attr("cy", function(d) {
               return projection([d["lon_0"],d["lat_0"] ])[1];
               })
     .attr("r", 5)
     .attr("class", "blue circle")
     .style("fill", "blue");
   states.selectAll(".red.circle")
     .data(data)
     .enter()
     .append("circle")
     .attr("cx", function(d) {
               return projection([+d["lon_1"], +d["lat_1"] ])[0];
               })
     .attr("cy", function(d) {
               return projection([+d["lon_1"],+d["lat_1"] ])[1];
               })
     .attr("r", 5)
     .attr("class", "red circle")
     .style("fill", "red");
  });

});

function click(d) {
  var centroid = path.centroid(d),
      translate = projection.translate();

  projection.translate([
    translate[0] - centroid[0] + width / 2,
    translate[1] - centroid[1] + height / 2
  ]);

  zoom.translate(projection.translate());

  states.selectAll("path").transition()
        .duration(1000)
        .attr("d", path);

  states.selectAll("red.circle").transition()
        .duration(1000)
        .attr("d", circle);
  states.selectAll("blue.circle").transition()
        .duration(1000)
        .attr("d", circle);       

}

function zoom() {
  projection.translate(d3.event.translate).scale(d3.event.scale);
  states.selectAll("path").attr("d", path);
  states.selectAll("red.circle").attr("d", path);
  states.selectAll("blue.circle").attr("d",path);
}
</script>

Answer 1

当您加载地图时，您正在设置圆圈的坐标，所以当您点击缩放功能时，您的圆圈会显示但不使用相同的坐标 - 我认为 - 如果您有帮助可以创建http://bl.ocks.org来查看此内容。

也许只有英国，美国和阿富汗的工作可以帮助http://bl.ocks.org/nkhine/3150901，但我基本上重新投影二级地图以适应新的缩放级别。

d3.js - 缩放和点击中心 - 地图比例，点不

1 个答案: