d3中不同节点中的不同自定义内容菜单

响尾蛇

右键单击该节点标题将不返回返回值,而是返回完整的功能作为标题。我只想显示我通过的回报。我不明白如何解决这个问题。任何人都可以帮我这个忙。答案不起作用,因为带有参数d的函数未引用节点。它给出了错误,如答案下方所注释。

var content = [
            {
                title: function(d) {
             if(d.url) {
            return 'Item 1';
}
                },
                action: function(elm, d, i) {
                    window.open(d.url, '_blank');
                }
            },
            {
                title: function(d) {
            if(d.url1) {
            return 'Item 2';
}
                },
                action: function(elm, d, i) {
                        if(d.url1){
                    window.open(d.url1, '_blank');
                        }
                }
            },
            {
                title: function(d) {
            if(d.url2) {
            return 'Item 3';
}
                },
                action: function(elm, d, i) {
                    window.open(d.url2, '_blank');
                }
            }
        ];
function collapse(d) {
    if (d.children) {
      d._children = d.children;
      d._children.forEach(collapse);
      d.children = null;
    }
  }
 collapse(root);
  update(root);

d3.select(self.frameElement).style("height", "800px");

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
      links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180; });
text = source;
  // Update the nodes…
  var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
   var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
      .on('contextmenu', d3.contextMenu(content))
      .on("click", click);

  nodeEnter.append("circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? (d.status ? d.status : "#f77a03") : "#fff";
    });//changed

  nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", function(d) { return d.children || d._children ? -10 : 10; })
      .style('fill',function(d) { return d.status ? d.status : "white"; })//added
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6);

    nodeEnter.append("image")
        .attr("xlink:href", function(d) { img = filter_click(r);return eval(img);})
      .attr("x", "-9px")
      .attr("y", "-20px")
      .attr("width", "20px")
      .attr("height", "40px");
  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

  nodeUpdate.select("circle")
      .attr("r", 4.5)
      .style("fill", function(d) { return d._children ? (d.status ? d.status : "#f77a03") : "#fff"; });//changed

  nodeUpdate.select("text")
      .style('fill',function(d) { return d.status ? d.status : "black"; })//added
      .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
  var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
      .remove();

  nodeExit.select("circle")
      .attr("r", 1e-6);

  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

  // Update the links…
  var link = svg.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      });

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

这里是一个plunker,该图是我面临的到底是什么,在这里是plunker其中的script.js具有工作是我想要我的脚本工作的代码。

我正在尝试制作一个自定义内容菜单,如果我能够解决上述问题,可以完成该菜单。任何帮助将不胜感激。

响尾蛇

我只是觉得很幸运,d3-content-menu.js在这两个插件中都略有不同。因此,当我从这个插件中使用js时,我可以根据需要进行更改。感谢劳伦特的帮助。

.html(function(d) {
            return (typeof d.title === 'string') ? d.title : d.title(data);

        })

这就是我认为与众不同的原因

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在图的D3节点中添加自定义颜色

来自分类Dev

如何在图的D3节点中添加自定义颜色

来自分类Dev

jstree angular指令中不同节点的自定义Contexmenu

来自分类Dev

在不同部分的自定义TableCell中重复的内容

来自分类Dev

在 Woocommerce 3 中显示自定义帐户菜单项的自定义内容

来自分类Dev

自定义D3 LineChart中的刻度线

来自分类Dev

Drupal 8 自定义菜单项不同的 URI

来自分类Dev

节点中的const,在不同的块中

来自分类Dev

比较Xpath中不同节点中的值

来自分类Dev

比较Xpath中不同节点中的值

来自分类Dev

iOS8中自定义UITableViewCell动态高度的内容具有不同的宽度

来自分类Dev

如何在具有不同内容的控制器中多次使用自定义UIView?

来自分类Dev

D3可折叠树的不同节点颜色

来自分类Dev

如何在D3中制作覆盖不同大小节点的凸包

来自分类Dev

如何在每个节点中具有自定义组件的JavaFX中更新anchorPane?

来自分类Dev

d3自定义时间间隔

来自分类Dev

使用D3的自定义布局

来自分类Dev

未选择D3自定义属性

来自分类Dev

D3自定义文字标签轴

来自分类Dev

d3 自定义数字格式

来自分类Dev

在不同的构建类型中自定义AndroidManifest

来自分类Dev

如何从自定义列表中获取不同的列表?

来自分类Dev

在自定义标签中附加不同大小的字体

来自分类Dev

更新不同单元格中的自定义函数

来自分类Dev

D3中的自定义排序tsv生成的表

来自分类Dev

在不同节点中查找项目

来自分类Dev

Flutter PopupMenuButton自定义菜单中的3个点

来自分类Dev

Flutter PopupMenuButton自定义菜单中的3个点

来自分类Dev

d3在节点中强制布局链接位置