1

我在点击时放大地图，但经纬度点没有缩放。它们被渲染为圆圈，我希望它们与地图一起移动。我在这里关注 D3 模板：http: //bl.ocks.org/mbostock/2206590

  var map_width = 960,
  map_height = 500,
  jsonRoot = '/static/d3/json/',
  centered;

 var projection = d3.geo.albersUsa()
.scale(1070)
.translate([map_width / 2, map_height / 2]); // default projection type for d3.geo.path
 var urls = {
    counties: jsonRoot + "us-counties.json",
    states: jsonRoot + "us-states.json"
}
, margin = { top: 0, right: 0, bottom: 0, left: 0 }
, width = 960 - margin.right - margin.left
, height = 500
, path = d3.geo.path().projection(projection)
, map;

var q = queue()
  .defer(d3.json, jsonRoot + "us-counties.json")
  .defer(d3.json, jsonRoot + "us-states.json")
  .await(ready);

function ready(error, countylines, statelines) {
window.error = error;
window.countylines = countylines;
window.statelines = statelines;

if (error){ 
  throw error;
}

var stateIds = {};
statelines.features.forEach(function(d) {
    stateIds[d.id] = d.properties.name;
});

countylines.features.forEach(function(d) {
    d.properties.state = stateIds[d.id.slice(0,2)];
})

// remove the loading text
d3.select('.loading').remove();

map = d3.select('#map').append('svg')
    .style('width', width)
    .style('height', height);

counties = map.append('g')
    .attr('class', 'counties')
  .selectAll('path')
    .data(countylines.features)
  .enter().append('path')
    .attr('d', path);

counties.on('mouseover', showCaption)
    .on('mousemove', showCaption)
    .on('mouseout', function() {
      caption.html(starter);
    })
    .on('click', clicked);

states = map.append('g')
    .attr('class', 'states')
  .selectAll('path')
    .data(statelines.features)
  .enter().append('path')
    .attr('d', path);


// Captions
var caption = d3.select('#caption')
  , starter = caption.html();

function showCaption(d, i) {
      var name = [d.properties.name, d.properties.state].join(', ');
  caption.html(name);
}

var systemSuccess = function(result){
  console.log(result);
}

    var site = map.append("circle")
      .attr("r",5)
      .classed("system", true)  
      .attr("latitude",37.77521)
      .attr("longitude",-122.42854)
      .attr("transform", function() {
      return "translate(" + projection([-122.42854,37.77521]) + ")";
    });

  });
})
};

function clicked(d) {
var x, y, k;

if (d && centered !== d) {
  var centroid = path.centroid(d);
  x = centroid[0];
  y = centroid[1];
  k = 4;
  centered = d;
} else {
  x = width / 2;
  y = height / 2;
  k = 1;
  centered = null;
}

counties.selectAll("path")
.classed("active", centered && function(d) { return d === centered; });

counties.transition()
.duration(750)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
.style("stroke-width", 1.5 / k + "px");

states.transition()
.duration(750)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
.style("stroke-width", 1.5 / k + "px");

map.selectAll(".system")
.attr("transform", function(d) { return "translate(" + projection([-122.42854, 37.77521 ]) + ")" });
}
});

地图适当缩放。但不是积分。

感谢所有帮助！

4

1 回答 1

2

正如拉斯建议的那样，您可以执行以下操作。

//Same projection and transformation as applicable to the path elements.    
d3.selectAll("circle")
.transition()
.duration(750)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")

我不确定上面的代码是否能正常工作......尽管我通过“缩放”d3 行为使用了类似的前提。

如果您希望您的点保持其大小，但处于正确的位置；您可以尝试语义缩放，或者您可以根据比例保持调整圆的半径，如下所示：

d3.selectAll("circle")
.attr("r", 5/k);
于 2014-03-24T04:35:00.540 回答