使用d3拖動行為的原點為樹節點創建“拖動手柄”

Question

我對d3來說還比較陌生，但我仍然碰到讓我感到困惑的事情。

基本上，我有一棵帶有可拖動節點的樹。 我想將節點的“拖動句柄”限制為僅圓，而不是圓和文本（以及我最終添加的其他內容）。

我知道這與在拖動行為中正確設置原點有關，但是我似乎不太了解。

我在這里找到了一些有關stackoverflow的有用信息（對不起，我只能發布兩個鏈接），然后查看https://groups.google.com/forum/#!topic/d3-js/fjp1mpvVW1M ， m將拖動行為應用於g容器的子元素，然后嘗試將轉換應用於其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/

UPDATE

我無法讓子組做我想做的事，但是我通過截取文本上的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 ”）

這將防止通過抓取文本進行拖動。

我還將給您提供兩個實時示例。 它們處理的是力量布局，而不是像您這樣的樹，但沒關系，原理是相同的。

示例1-通過同時抓住圓圈和標簽可以拖動

示例2-僅抓住圓圈即可拖動

它們之間的區別僅在於行：

  pointer-events: none;