将自定义html添加到d3 js树中的节点 [英] Add custom html to nodes in d3 js tree

问题描述

我正在尝试构建类似 d3 js树的树.我需要在该div中为树的每个节点添加一个div和2或3个按钮.单击该节点按钮应显示一个弹出窗口.

I'm trying to build a tree like d3 js tree. I need to add a div and 2 or 3 buttons in that div for each node of the tree. Clicking on that node button should show a popup.

我正在尝试这种功能还有其他与此类似的插件.但是我在d3 js树中需要它，因为它的导航和动画很流畅.

I'm trying for this kind of functionality There are other plugins similar to this. But i need this in d3 js tree as its navigation and animations are smooth.

推荐答案

我已经做到了:

• 使用D3树形网页上的基本示例.
• 在节点中添加了更多SVG元素
• 单击节点文本(添加，删除，编辑，移动)以在节点上执行此简单操作时，添加了一个弹出"菜单.

以我的经验，最好使用SVG元素而不是DIV(您可以将按钮显示为图像或形状，将文本显示为svg:text.

In my experience, it is better to use SVG elements instead of a DIV (You can display buttons as images or shapes, and text as svg:text.

这是一些代码:

function clickLabel(d) {

// this removes the popup if it was displayed on another node beforehand
// is=2 identifies markers... 

d3.selectAll("[marker='2']").remove();

// Every node has an ID, and I add shapes to it

d3.select("[id_node='" + d.id + "']")
    .append("image")
    .attr("marker", 2)
    .attr("xlink:href", "/Content/delete_item.png")
    .attr("x", 0)
    .attr("y", -50)
    .attr("height", 32)
    .attr("width", 32)
    .on("click", removeItem);

d3.select("[id_node='" + d.id + "']")
    .append("image")
    .attr("marker", 2)
    .attr("xlink:href", "/Content/edit.png")
    .attr("x", -50)
    .attr("y", -30)
    .attr("height", 32)
    .attr("width", 32)
    .on("click", editItem); 

d3.select("[id_node='" + d.id + "']")
    .append("image")
    .attr("marker", 2)
    .attr("xlink:href", "/Content/add_item.png")
    .attr("x", 20)
    .attr("y", 10)
    .attr("height", 32)
    .attr("width", 32)
    .on("click", addItem);


d3.select("[id_node='" + d.id + "']")
    .append("image")
    .attr("marker", 2)
    .attr("xlink:href", "/Content/next_item.png")
    .attr("x", -30)
    .attr("y", 20)
    .attr("height", 32)
    .attr("width", 32)
    .on("click", moveItem);

// Stop events or else it gets de-selected
event.stopPropagation();

}

希望这会有所帮助！

这篇关于将自定义html添加到d3 js树中的节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！