我对 d3 还比较陌生,而且我仍然遇到一些困扰我的事情。
基本上,我有一棵带有可拖动节点的树。我想将节点的“拖动 handle ”限制为仅圆圈,而不是圆圈和文本(以及我最终添加的任何其他内容)。
我知道这与正确设置我的拖动行为中的原点有关,但我似乎不太明白。
我在 stackoverflow 上找到了一些有用的信息(抱歉,我只能发布两个链接),并查看 https://groups.google.com/forum/#!topic/d3-js/fjp1mpvVW1M看来我正在将拖动行为应用于 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"; });
这是一个 fiddle : http://jsfiddle.net/tsmith77/4R3Cb/
更新
我无法让子组执行我想要的操作,但我通过拦截文本上的 mousedown 事件来完成我想要的操作:
nodeEnter.append("text")
.on("mousedown", function (d) {
d3.event.stopPropagation();
})
.on("click", function (d) {
alert("text clicked");
})
这可以防止文本成为拖动 handle ,但仍然允许我在单击文本时执行操作。
最佳答案
在 CSS 中为与节点对应的文本设置以下行:
pointer-events: none;
(一种方法是为所有此类文本分配一个名为“node-label
”的类,然后定义该类的属性“pointer-事件
”如上所述)
这将防止通过抓取文本进行拖动。
我还会给你两个活生生的例子。它们处理力布局,而不是像您的情况那样的树,但这应该不重要,原理是相同的。
example 1 - 通过捕获圆圈和标签可以拖动
example 2 - 可以通过仅抓取圆圈来拖动
它们之间的区别仅在于一行:
pointer-events: none;
关于javascript - 使用 d3 拖动行为的原点为树节点创建 "drag handle",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24702055/