javascript - 如何将对象传递给 d3-context-menu 动态菜单列表

Question

对于一个项目，我使用这个上下文菜单：https ://www.npmjs.com/package/d3-context-menu

“动态菜单列表”（https://www.npmjs.com/package/d3-context-menu#dynamic-menu-list）允许将菜单编写为函数。这工作正常。但是，函数方法允许将数据传递给菜单以区分要显示的项目。

我在 D3 树布局中调用菜单，如下所示：

nodeEnter.append("circle")
    .attr('class', function(d) {
        return 'nodeCircle ' + d.state;})
    .attr("r", 0)
    .style("fill", function(d) {
        return d._children ? "lightsteelblue" : "#fff";
    })
    .on("mouseover", function(d) {
        show_tooltip(d);
    })
    .on("mouseout", function(d) {
        hide_tooltip(d);
    })
    .on("contextmenu", d3.contextMenu(node_menu)
    );

这可行，但我想将“d”传递给“node_menu”。

我已经尝试过的：

d3.contextMenu(node_menu(d))

=> "d" 只是值 "1"

.on("contextmenu", function(d) {
        d3.contextMenu(node_menu(d));
    })

=> 根本不显示上下文菜单，如果我添加返回也不显示

如何将“d”对象传递给“node_menu”函数？

编辑：
也许有帮助，“node_menu”功能：

var node_menu = function (data) {
    console.log('data:');
    console.log(data);

    if (data.depth == 6) {
        return  node_menu_v1;
    }
    else{
        return node_menu_v2;
    }
};

标签： javascriptd3.js

Answer 1

data在数组内部或外部创建多个菜单结构。

var data = [
  {v: 1, menu: menu1},
  {v: 2, menu: menu2},
  {v: 3, menu: menu3}
];
...
.on('contextmenu', function(d) { d3.contextMenu(d.menu)(d);} );