我正在将我的地图升级到D3的v3版本,并使用在这里找到的D3示例代码中概述的点击缩放转换。 我的代码几乎完全相同,只是我的地图尺寸略小(564 x 300而不是960 x 500)。此外,我将我的地图嵌套在一个div中,位于页面的左上角(虽然我认为这并不重要)。我的地图的初始加载很好(目前使用黑色背景进行区分)。
// Clear existing map in case there is remnant data.
$("#map").html(null);
var mapWidth = 564;
var mapHeight = 300;
var projection = d3.geo.albersUsa()
.scale(mapWidth)
.translate([0, 0]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#map")
.append("svg")
.attr("id", "map-svg")
.attr("width", mapWidth)
.attr("height", mapHeight);
svg.append("rect")
.attr("id", "map-background")
.attr("class", "background")
.attr("width", mapWidth)
.attr("height", mapHeight)
.on("click", click);
// Create placeholders for shapes and labels
var states = svg.append("g")
.attr("transform", "translate(" + mapWidth / 2 + "," + mapHeight / 2 + ")")
.attr("id", "states");
然而,当点击一个州并运行点击函数时,我的转换似乎出了问题。在我的情况下,阿肯色州被点击了(用蓝色阴影表示)。
function click(d)
{
var x = 0,
y = 0,
k = 1;
if (d && centered !== d)
{
var centroid = path.centroid(d);
x = -centroid[0];
y = -centroid[1];
k = 4;
centered = d;
}
else
{
centered = null;
}
d3.select("#states").selectAll("path")
.classed("active", centered && function (d) { return d === centered; });
d3.select("#states").transition()
.duration(1000)
.attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")")
.style("stroke-width", 1.5 / k + "px");
}
我的想法是,我的质心计算需要略微调整,以适应地图的较小大小或不同位置,但这似乎也不正确。
我该如何进行适当的调整?
编辑:我发现如果在变换的末尾添加一个“负翻译”(translate(" + -x + "," + -y + ")),它可以更接近于正确地居中缩放,但并非完美。