Question

我正在尝试修改我的D3（v4）缩放，以便在最后一次缩放变换后重新计算标签和标记的位置。

我如何实现这一目标？这就是我调用缩放的方式：

  svg.transition()
      .duration(3000)
      .call( zoom.transform, d3.zoomIdentity.translate(translate[0],translate[1]).scale(scale));

这是zoom函数：

var zoom = d3.zoom()
    .scaleExtent([1 << 12, 1 << 14])
    .on("zoom", zoomed);

这是运行缩放函数中所有转换的代码（它运行的次数是.duration()的函数）：

vector.selectAll("path")
.attr("transform", "translate(" + [transform.x, transform.y] + ")scale(" + transform.k + ")")
.style("stroke-width", 1 / transform.k);

这是在上面的最后一次缩放'转换'完成后才需要运行的东西：

  country_labels.selectAll("text")
    .attr("display", "inline")
    .attr("x", function(d){return transform.apply(path.centroid(d))[0];})
    .attr("y", function(d){return transform.apply(path.centroid(d))[1];})


  country_markers.selectAll("rect")
    .attr("display", "inline")
    .attr("x", function(d){return transform.apply(path.centroid(d))[0];})
    .attr("y", function(d){return transform.apply(path.centroid(d))[1];})

完整的jsfiddle can be found here.

D3（v4）：仅在最后一次缩放转换后的标签/标记放置

0 个答案: