我如何使用D3来强制用户点击g.node对象内部的圆形对象

How do I used D3 to force a user click on a circle object inside of a g.node object?

本文关键字：对象 node 内部 D3 何使用 用户      更新时间：2023-09-26

当用户在我的D3树中选择一个节点时，我会运行一些非常复杂的代码。我想通过程序强制用户界面单击。我已经尝试了一些关于堆栈溢出的建议，但我认为我有一个特殊的情况。

//This is how I create the nodes...
    node = nodeElements.selectAll("g.node")
                .data(nodes, function(d) {return d.name;});   
    nodeEnter = node.enter().append("g")
                .attr("class", "node")
                .attr("name", function(d){return d.name;});
    nodeEnter.append("circle")
                .attr("r", 10)
                .attr("show", true)
                .attr("class", "displayNode")
                .on("click", mouseClickNode); //<---I want to trigger this

我认为我应该选择我的节点元素下的圆圈。

我试过很多东西，这里有一些

//Tried
    d3.select("g.node[name='someNodeName']>circle.displayNode").on("click")();
//Tried
    d3.select("g.node[name='someNodeName']>circle").on("click")();
//I got desperate...
    node.filter(function(d){
            if(d.name === "someNodeName"){
                return d;
            }   
        }).on("click")();

您在选择正确的圆圈来触发事件时遇到问题吗？还是触发本身？选择器g.node[name='someNodeName']>circle.displayNode看起来不错。

如果处理程序函数使用绑定数据，则.on('click')();不是您想要的方式。相反，建立自己的活动来启动：

d3.select（'#btn'）.on（'click'，function（）{var e=document.createEvent（'UIEvents'）；e.initUIEvent（'click'，true，true）；d3.select（'g.node[name="foo"]>circle.displayNode'）.node（）.dispatchEvent（e）；})

Fiddle

我不能真正试用您的代码，但我相信我也做过类似的事情。我用的是简单得多的

d3.selectAll('.node')
.on("click",mouseClickNode);

这里发生的情况是，您可以选择类节点中的任何内容。当单击其中一个时，您的函数mouseClickNode将仅为该节点运行。

区别在于我使用selectAll。使用select只会选择第一个节点。

相关文章：