Question

我目前正在使用此功能放大状态：

function clicked(d) {
  if (active.node() === this) return reset();

  active.classed("active", false);
  active = d3.select(this).classed("active", true);

  var bounds = path.bounds(d),
      dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][1] - bounds[0][1],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2,

      scale = .9 / Math.max(dx / width, dy / height),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

  g.transition()
      .duration(750)
      .style("stroke-width", 1.5 / scale + "px")
      .attr("transform", "translate(" + translate + ")scale(" + scale + ")");    
}

我在路径上的点击监听器上有这个：

   .on("click", clicked)

我希望能够按类名选择d3元素，然后放大它。最好，我想调用哪个状态来放大这样的函数：

function zoomIn(state) {
   //zoom into the state
}

我该怎么做？

Answer 1

您只需更改select语句即可按类名获取选择，而不是使用由点击处理程序填充的this。我还没有对它进行测试，但它看起来像这样：

function zoomIn(state) {
  var node = d3.select(state);

  if (active.node() === node) return reset();

  active.classed("active", false);
  active = node.classed("active", true);

  var bounds = path.bounds(d),
      dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][1] - bounds[0][1],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2,

      scale = .9 / Math.max(dx / width, dy / height),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

  g.transition()
      .duration(750)
      .style("stroke-width", 1.5 / scale + "px")
      .attr("transform", "translate(" + translate + ")scale(" + scale + ")");    
}

您可以使用所需的类名称来调用它：

zoomIn(".washington");

Answer 2

我使用此SO问题中的代码找到了解决我自己问题的方法：How to invoke "click" event programmatically in d3?

我复制了这个功能：

jQuery.fn.d3Click = function () {
  this.each(function (i, e) {
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

    e.dispatchEvent(evt);
  });
};

并制作了这个zoomIn函数：

function zoomIn(id) {
  $(id).d3Click();
}

要使用类名放大路径，我使用了：

zoomIn(".className");

希望这有助于像我一样处于类似情况的人！

d3按类名缩放

2 个答案: