Javascript 在D3的上下文菜单中获取节点详细信息

右键单击节点并调用

contextmenu

函数时，我试图获取节点详细信息（

id

属性）。我能够使用

var self=d3获取节点对象但我无法计算出
节点的id属性（不过我可以在控制台日志中看到）

我计划在获得
节点id后，将
id
传递给菜单功能


您可以将数据作为在
contextmenu
事件中调用的函数的参数传递：

.on('contextmenu', function(d) { ... }

它允许您在函数中获取
id
：

console.log(d.id);


.node{
填写：#000；
}
.光标{
填充：绿色；
笔画：棕色；
指针事件：无；
}
.节点文本{
指针事件：无；
字体：10px无衬线；
}
路径链接{
填充：无；
行程：#666；
笔划宽度：1.5px；
}
.链接{
填充：无；
行程：#666；
笔划宽度：1.5px；
}
#许可证{
填充：绿色；
}
.link.licensing{
笔画：绿色；
}
.link.resolved{
笔划数组：0,2 1；
}
圈{
填充：绿色；
笔画：红色；
笔划宽度：1.5px；
}
正文{
字体：10px无衬线；
指针事件：无；
文本阴影：01px0#fff，1px0#fff，0-1px0#fff，-1px0#fff；
}

变量宽度=500，高度=300；
var links=[{source:“模拟器”，target:“监视器”，type:“已解析”}，{source:“web”，target:“监视器”，type:“已解析”}]；
var节点=[{“id”：“monitor”，“grp”：“system”}，{“id”：“simulator”，“grp”：“system”}，{id:“web”，grp:“client”}]；
函数重置（）{
}
函数上下文菜单（）{
变量高度，
宽度，
边距=0.1，//宽度的分数
项目=[]，
重缩放=假，
样式={
“rect”：{
“老鼠出没”：{
“填充”：“rgb（244244244）”，
“笔划”：“白色”，
“笔划宽度”：“1px”
}, 
“鼠标悬停”：{
'填充'：'rgb（200200）'
}
}, 
“文本”：{
“填充”：“钢蓝”，
“字体大小”：“13”
}
}; 
功能菜单（x，y）{
d3.选择（'.context menu'）.remove（）；
scaleItems（）；
//画菜单
d3.选择（“svg”）
.append（'g'）.attr（'class'，'context menu'））
.selectAll（'tmp'）
.数据（项）。输入（）
.append（'g'）.attr（'class'，'menu entry'））
.style（{'cursor'：'pointer'}）
.on（'mouseover'，function（）{
d3.select（this.select（'rect'）.style（style.rect.mouseover）}）
.on（'mouseout'，function（）{
d3.select（this.select（'rect'）.style（style.rect.mouseout）}）；
d3.选择全部（“.菜单项”）
.append（'rect'）
.attr（'x'，x）
.attr（'y'，函数（d，i）{返回y+（i*高度）；}）
.attr（'width'，width）
.attr（'height'，height）
.style（style.rect.mouseout）；
d3.选择全部（“.菜单项”）
.append（'文本'）
.text（函数（d）{return d；}）
.attr（'x'，x）
.attr（'y'，函数（d，i）{返回y+（i*高度）；}）
.attr（'dy'，高度-余量/2）
.attr（'dx'，边距）
.style（style.text）；
//其他互动
d3.选择（'主体'）
.on（'单击'，函数（））{
d3.选择（'.context menu'）.remove（）；
});
}
菜单项=功能（e）{
如果（！arguments.length）返回项；
对于（参数中的i）项，push（参数[i]）；
重新缩放=真；
返回菜单；
}
//自动设置宽度、高度和边距；
函数scaleItems（）{
如果（重新缩放）{
d3.选择（'svg'）。选择全部（'tmp'））
.数据（项）。输入（）
.append（'文本'）
.text（函数（d）{return d；}）
.style（style.text）
.attr（'x'，-1000）
.attr（'y'，-1000）
.attr（'class'，'tmp'）；
var z=d3.selectAll（'.tmp'）[0]
.map（函数（x）{return x.getBBox（）；}）；
width=d3.max（z.map（函数（x）{return x.width；}））；
边距=边距*宽度；
宽度=宽度+2*边距；
height=d3.max（z.map（函数（x）{return x.height+margin/2；}））；
//清理
d3.选择所有（'.tmp'）.remove（）；
重缩放=假；
}
}
返回菜单；
}
可变宽度=400，
高度=200，
半径=8；
变量映射={}
forEach（函数（d，i）{
map[d.id]=i；
})
links.forEach（函数（d）{
d、 source=map[d.source]；
d、 target=map[d.target]；
})
var-force=d3.layout.force（）
.节点（d3.值（节点））
.链接（links）
.尺寸（[宽度、高度]）
.linkDistance（50）
。收费（-200）
.on（“滴答”，滴答）
.start（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
//每类型标记，因为它们不继承样式。
svg.append（“defs”）.selectAll（“marker”）
.数据（[“诉讼”、“许可”、“已解决”]）
.enter（）.append（“标记”）
.attr（“id”，函数（d）{return d；}）
.attr（“视图框”，“0-5 10”）
.attr（“参考文献”，第15页）
.attr（“参考文献”，-1.5）
.attr（“markerWidth”，6）
.attr（“markerHeight”，6）
.attr（“方向”、“自动”）
.append（“路径”）
.attr（“d”，“M0，-5L10,0L0,5”）；
var path=svg.append（“g”）.selectAll（“path”）
.data（force.links（））
.enter（）.append（“路径”）
.attr（“类”，函数（d）{return“link”+d.type；}）
.attr（“marker end”，函数（d）{return”url（#“+d.type+”）；}）；
var menu=contextMenu（）.items（'first item'，'second option'，'whatever，man'）；
var circle=svg.append（“g”）.selectAll（“circle”）
.data（force.nodes（））
.enter（）.append（“圆”）
.attr（“r”，6）
卡尔先生
console.log(d.id);

                function createNestedMenu(parent, root, depth = 0) {
                var resolve = function (value) {
                    return utils.toFactory(value).call(root, data, index);
                };

                parent.selectAll('li')
                .data(function (d) {
                        var baseData = depth === 0 ? menuItems : d.children;
                        return resolve(baseData);
                    })
                    .enter()
                    .append('li')
                    .each(function (d) {
                        var elm = this;
                        // get value of each data
                        var isDivider = !!resolve(d.divider);
                        var isDisabled = !!resolve(d.disabled);
                        var hasChildren = !!resolve(d.children);
                        var hasAction = !!d.action;
                        var text = isDivider ? '<hr>' : resolve(d.title);

                        if(d.title == 'ConfigMenuPlaceholder'){
                            text = 'Config: '+data.name;
                        }

                        var listItem = d3.select(this)
                            .classed('is-divider', isDivider)
                            .classed('is-disabled', isDisabled)
                            .classed('is-header', !hasChildren && !hasAction)
                            .classed('is-parent', hasChildren)
                            .html(text)
                            .on('click', function () {
                                // do nothing if disabled or no action
                                if (isDisabled || !hasAction) return;
                                d.action(elm, data, index);
                                //d.action.call(root, data, index);
                                closeMenu();
                            });

                        if (hasChildren) {
                            // create children(`next parent`) and call recursive
                            var children = listItem.append('ul').classed('is-children', true);
                            createNestedMenu(children, root, ++depth)
                        }
                    });
            }