点击D3树节点
D3 Tree node on click
我目前有一个D3树布局的节点,可以在运行时添加文本附加到每个节点。几乎所有的工作都很好,除了node.on(..)
函数,比如node.on("mousedown" ....)
。问题是节点本身不响应单击,而附加的文本响应。即node.on("mousedown",...)
被触发时,附加的文本被点击,而不是实际的节点。任何指导将非常感激!核心函数的代码如下所示,它只接受一个JSON样式的对象和一个父对象id,然后将该JSON数据作为给定父对象的子对象插入到树中:
function update(record_to_add, parent) {
if (nodes.length >= 500) return clearInterval(timer);
// Add a new node to a random parent.
var n = {id: nodes.length, Username: record_to_add.Username},
p = nodes[parent];
if (p.children) p.children.push(n); else p.children = [n];
nodes.push(n);
// Recompute the layout and data join.
node = node.data(tree.nodes(root), function(d) { return d.id; });
link = link.data(tree.links(nodes), function(d) { return d.source.id + "-" + d.target.id; });
// Add entering nodes in the parent’s old position.
node.enter().append("circle", "g")
.attr("class", "node")
.attr("r", 10)
.attr("cx", function(d) { return d.parent.px; })
.attr("cy", function(d) { return d.parent.py; });
// Add entering links in the parent’s old position.
link.enter().insert("path", ".node")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: d.source.px, y: d.source.py};
return diagonal({source: o, target: o});
});
node.enter().insert("text")
.attr("x", function(d) { return (d.parent.px);})
.attr("y", function(d) { return (d.parent.py);})
.text(function(d) { return d.Username; });
node.on("mousedown", function (d) {
var g = d3.select(this); // The node
// The class is used to remove the additional text later
console.log("FOO");
});
node.on("mouseover", function (d) {
var g = d3.select(this); // The node
// The class is used to remove the additional text later
var info = g.append('text')
.classed('info', true)
.attr('x', 20)
.attr('y', 10)
.text('More info');
});
// Transition nodes and links to their new positions.
var t = svg.transition()
.duration(duration);
t.selectAll(".link")
.attr("d", diagonal);
t.selectAll(".node")
.attr("cx", function(d) { return d.px = d.x; })
.attr("cy", function(d) { return d.py = d.y; });
t.selectAll("text")
.style("fill-opacity", 1)
.attr("x", function(d) { return d.px = d.x; })
.attr("y", function(d) { return d.py = d.y; });
}
为了避免文本元素妨碍事件捕获,您可以尝试配置文本元素以忽略指针事件:
svg text {
pointer-events: none;
}
您也可以直接使用d3:
textSelection
.attr('pointer-events', 'none');
相关文章:
- 在不添加树节点的情况下从网格拖放到树
- 在带有 标记的树节点上以编程方式触发单击事件
- d3树节点位置
- 用于构建树节点层次结构的javascript库
- 正在节点d3.js之间创建链接,当前返回Uncaught TypeError:无法读取属性'weight'
- 树递归:如何获取所选树节点的父根
- 如何将 css 类添加到 Ext4 中的树节点
- 分页动态加载的 Webix 树节点
- D3.js具有相同父级的树节点
- 当我在 Dojo 中左键单击树行(树节点)时,如何从对象存储中获取 ID
- 如何仅选择具有特定 CSS 类的节点?D3/JS.
- 如何查看使用 d.selected 选择了哪些节点?D3/JS.
- 在连接到节点 d3.js 之前穿过另一点的线
- 如何一次移动所有选定的节点?D3/JS.
- 树映射高亮显示子节点D3
- 是否有一种方法可以自动打开D3折叠树节点逐个节点(对于有子节点的节点)
- 点击D3树节点
- d3.js树节点布局删除根节点
- 外部dom元素上的D3.js事件处理程序来触发svg树节点的重绘
- 在d3中的树节点上调用操作符