D3，在缩放/平移时更新绘图数据

我有一堆绘制到D3 topojson地图的一些点与一些json数据，我正在试图让它放大。然而，我有一个非常简单的缩放工作，但是我绘制的点没有移动/更新与变焦。D3，在缩放/平移时更新绘图数据

这里是基本设置：

var svg = d3.select("#map").append("svg") 
.attr("preserveAspectRatio", "xMidYMid") 
.attr("viewBox", "0 0 " + width + " " + height) 
.attr("width", m_width) 
.attr("height", m_width * height/width); 

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

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

d3.json("scripts/world-110m2.json", function(error, us) { 
    g.append("g") 
.attr("id", "countries") 
.selectAll("path") 
.data(topojson.feature(us, us.objects.countries).features) 
.enter() 
.append("path") 
.attr("id", function(d) { return d.id; }) 
.attr("d", path) 

});

然后是点的函数绘制，所以我可以交换他们需要（这个问题的这也许部分，我也不太清楚） -

function plotPoints(data){ 
svg.selectAll("circle") 
.transition() 
.delay(function(d, i) { return i * 2; }) 
.attr("r", 0) 
.remove() 

svg.selectAll(".pin") 
.data(data.earthquakes) 
.enter().append("circle", ".pin") 
.on('mouseover', tip.show) 
.on('mouseout', tip.hide) 
.attr("transform", function(d) { 
return "translate(" + projection([ 
    d.lon, 
    d.lat 
]) + ")" 

}) 
.attr("r", 0) 
.transition() 
.duration(500) 
.delay(function(d, i) { return i * 5; }) 
.attr("r",function(d){ 
    return d.magnitude/2; 
})

我使用的变焦方式，我发现了一些不错的例子 -

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

}); 

svg.call(zoom)

所以，缩放和平移工作很好，我在尝试让我的绘图点更新，当我缩放和平移时，它看起来像他们在地图上的一张玻璃现在，当我移动地图时移动。谢谢！

编辑：我已经在这里就是一个例子 -

http://jsfiddle.net/o3dxgfuu/6/

你看，当你在绘制点放大不动。！还停留在这个:(谢谢

来源

2015-02-11 ajmajmajma

你能告诉我们整个代码，也许在一个jsfiddle？ – 2015-02-11 02:25:37

@SteveBennett我把整个控制器放在小提琴里 - http://jsfiddle.net/bL4mmty6/，我会努力获得一个正在运行的副本，可能需要一点点 – ajmajmajma 2015-02-11 03:58:03

@SteveBennett新增 - 抱歉花了这么久！ – ajmajmajma 2015-02-13 03:44:57

这里有一个更新的拨弄着它的工作：http://jsfiddle.net/o3dxgfuu/12/

，我所做的改变是：

增添了新的元素g举行circle.pin元素：

var g = svg.append("g"); 
var gPins = svg.append("g"); //new g element

添加了circle元素到新g元：

// svg.selectAll(".pin") 
gPins.selectAll(".pin") // add circles to new g element 
    .data(data.earthquakes) 
.enter().append("circle", ".pin") 
    .attr("transform", function(d) { 
    return "translate(" + projection([ 
     d.lon, 
     d.lat 
     ]) + ")" 

    })

变换新g元素在你的缩放处理

var zoom = d3.behavior.zoom() 
    .on("zoom",function() { 
     g.attr("transform","translate("+ 
      d3.event.translate.join(",")+")scale("+d3.event.scale+")"); 
     gPins.attr("transform","translate("+ 
     d3.event.translate.join(",")+")scale("+d3.event.scale+")"); // transform new g element 

    });

基本上，你应该将你的circle元素为一组，然后应用transform到组元素。

来源

2015-02-13 04:14:48

D3，在缩放/平移时更新绘图数据

回答

相关问题