使用 d3 拖动行为的原点为树节点创建“拖动句柄”

Question

我对 d3 还比较陌生，但我仍然会遇到一些让我难以理解的事情。

基本上，我有一棵带有可拖动节点的树。我想将节点的“拖动句柄”限制为只有圆圈，而不是圆圈和文本（以及我最终添加的任何其他内容）。

我知道这与在我的拖动行为中正确设置原点有关，但我似乎不太明白。

我在 stackoverflow 上找到了一些有用的信息（抱歉，我只能发布两个链接），查看 https://groups.google.com/forum/#!topic/d3-js/fjp1mpvVW1M 似乎我正在将拖动行为应用于 ag 容器的子元素，然后尝试将转换应用于其 g 容器。

我怎样才能做到这一点？

以下是相关代码：

var dragListener = d3.behavior.drag()
.origin(function () {
    var t = d3.select(this);
    return {
        x: t.attr("x") + d3.transform(t.attr("transform")).translate[0],
        y: t.attr("y") + d3.transform(t.attr("transform")).translate[1]
    };
})
.on("drag", function (d) {
    d.x0 += d3.event.dy;
    d.y0 += d3.event.dx;       
    //var node = d3.select(this);  //this works
    var node = d3.select(this.parentNode)  //this doesn't work
    node.attr("transform", "translate(" + d.y0 + "," + d.x0 + ")");
});

  var nodeEnter = node.enter().append("g")
  //.call(dragListener)  // this works
  .attr("class", "node")
  .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
  .on("click", click);

  nodeEnter.append("circle")
  .call(dragListener)  // this doesn't work
  .attr("r", 1e-6)
  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

这是一个小提琴： http://jsfiddle.net/tsmith77/4R3Cb/

更新

我无法让子组做我想做的事，但我通过拦截文本上的 mousedown 事件完成了我想做的事：

  nodeEnter.append("text")
  .on("mousedown", function (d) {
      d3.event.stopPropagation();
      })
  .on("click", function (d) {
      alert("text clicked");
  })

这可以防止文本成为拖动句柄，但仍然允许我在单击文本时执行操作。

Answer 1

在您的 CSS 中为与节点对应的文本设置以下行：

  pointer-events: none;

（一种方法是为所有此类文本分配一个名为“node-label”的类，然后像上面一样定义该类的属性“pointer-events”）

这将防止通过抓取文本进行拖动。

我还会给你两个活生生的例子。他们处理强制布局，而不是像你的情况那样处理树，但没关系，原理是一样的。

example 1 - 可以通过抓住圆圈和标签来拖动

example 2 - 只抓取圆圈即可拖动

它们之间的区别只有一行：

  pointer-events: none;