Question

当用户选择D3树中的节点时，我会运行一些相当复杂的代码。我想以编程方式强制UI单击。我已经尝试了一些有关堆栈溢出的建议，但我认为我有一个特例。

//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

我想我应该选择我的node元素下的圆圈。

我尝试过很多东西，这里有几个

//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")();

Answer 1

我无法真正尝试您的代码，但我相信我做过类似的事情。我用的更简单

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

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

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

Answer 2

选择正确的圆圈以触发事件是否有问题？或者它是触发本身？选择器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强制用户单击g.node对象内的圆形对象？

2 个答案: