Javascript d3.js将缩放行为更改为语义缩放

我正在用d3.js做一些关于缩放的测试。目前，我已经在测试中成功实现了几何缩放，但它有一个缺点：缩放的

g

下的元素正在缩放。据我所知，这可以通过使用解决

问题是我需要在测试中使用

scale

，因为我正在将它与jQuery.UI滑块

value

同步

另一方面，我希望调整

文本

元素的大小，以在缩放操作后保持其大小

我有一个我目前尝试的例子

---

我在更改代码以适应此目的时遇到问题。任何人都可以分享一些见解/想法吗？

对于您的解决方案，我合并了两个示例：

代码片段：

function zoom() {
  text.attr("transform", transform);
  var scale = zoombehavior.scale();
  //to make the scale rounded to 2 decimal digits
  scale = Math.round(scale * 100) / 100;
  //setting the slider to the new value
  $("#slider").slider( "option", "value", scale );
  //setting the slider text to the new value
  $("#scale").val(scale);
}
//note here we are not handling the scale as its Semantic Zoom
function transform(d) {
  //translate string
  return "translate(" + x(d[0]) + "," + y(d[1]) + ")";
}

function interpolateZoom(translate, scale) {
  zoombehavior
        .scale(scale)//we are setting this zoom only for detecting the scale for slider..we are not zoooming using scale.
        .translate(translate);
      zoom();
}
var slider = $(function() {
  $("#slider").slider({
    value: zoombehavior.scaleExtent()[0],//setting the value
    min: zoombehavior.scaleExtent()[0],//setting the min value
    max: zoombehavior.scaleExtent()[1],//settinng the ax value
    step: 0.01,
    slide: function(event, ui) {
      var newValue = ui.value;
      var  center = [centerX, centerY],
        extent = zoombehavior.scaleExtent(),
        translate = zoombehavior.translate(),
        l = [],
        view = {
          x: translate[0],
          y: translate[1],
          k: zoombehavior.scale()
        };
      //translate w.r.t the center
      translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k];
      view.k = newValue;//the scale as per the slider
      //the translate after the scale(so we are multiplying the translate)
      l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];

      view.x += center[0] - l[0];
      view.y += center[1] - l[1];

      interpolateZoom([view.x, view.y], view.k);

    }
  });
});

我正在缩放w.r.t.250250，它是剪辑圆的中心

工作代码（添加了必要的注释）

---

希望这有帮助

要想做你想做的事，你需要先重构一下代码。对于d3，最好使用

data（）

将项目附加到选择中，而不是使用for循环

因此：

---

for（i=0；我能与您当前的尝试分享一把小提琴吗？我已经编辑了我的（很长，对不起）发布它。Cyril的编程示例与您正在寻找的滑块一样，我将尝试添加缺少的代码问题已解决，代码需要大量清理和重构，但它应该帮助您了解我所做的工作。如果您有任何问题，请告诉我：）非常接近，但有一个小问题：鼠标滚轮的缩放集中在鼠标光标上，而不是图形的中心。。。但我想我可以自己修复它。我不知道你想要这种行为，但这应该通过在程序开始时添加
zoom.center（[width/2 height/2]）
来解决。也许在onClick的最后也可以。你已经生成了一些我想要的行为，但不是基于我的示例。它有许多有效的观点，我感谢你们，但我想找一个更详细的解释，说明如何修改我的例子，而不是完全改变它。很抱歉，我在问题/悬赏中没有说得更清楚。@Joum你的例子是非常几何缩放的centeric 60%的代码被删除了，因为我刚刚优化了其余的部分……我认为它工作顺利，我真的没有发现任何问题。在网上没有任何帮助（因为没有人尝试过这一点），这是对一个工作示例的重写：）