D3：缩放未能按预期包含元素

Question

我正在尝试调整我的 D3 缩放，以便所有元素都按预期放大。我的元素如下：国家、标记（圆圈）和流（多边形）。

到目前为止，所有元素都按预期加载。首先是国家，然后是圈子和流动，然后是随后的互动。但缩放仅适用于国家。圆圈和流不会缩放，而只是保持静止。我究竟做错了什么？

链接到我的jsfiddle

我添加到地图的国家如下：

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

d3.json("countries.json", function(collection) {
  country.selectAll("path")
      .data(collection.features)
      .enter().append("path")
      .attr("d", path);
});

我在用户交互后添加的圈子，如下：

var g_circles = svg.append("g").attr("class", "circles");

$.each(circles, function(i, d) {
  dz = projection(d);
  g_circles.append("circle")
    .attr("class", "marker")
    .attr("d", path)
    .attr("cx", dz[0])
    .attr("cy", dz[1])
    .call(zoom);
});

我添加到地图的流程如下：

  var g_lines = svg.append("g").attr("class", "lines");

  g_lines.selectAll(".link_line")
    .data(links)
    .enter()
    .append("path")
    .attr("class", "link_line")
    .style('fill-opacity', 0.3)
    .attr("d", "path")
    .call(zoom);

缩放如下：

var zoom = d3.behavior.zoom()
  .translate(projection.translate())
  .scale(projection.scale())
  .scaleExtent([h, 350000 * h])
  .on("zoom", zoomed);

function zoomed() {
  projection.translate(d3.event.translate).scale(d3.event.scale);
  svg.selectAll("path, circle, .link_line").attr("d", path);
}

Answer 1

您是否尝试将所有预期的组（g_circles 和 g_lines）添加到一个新的单个组 (g) 中并使用该组的维度来做焦点？

缩放应应用于 SVG：

See this other question as it's very similar to yours.

通常期望缩放作为 svg like in this example 的翻译。