Question

我是D3.js的新手我跟随了例Drag and Drop Zoomable Tree。我想以这样一种方式修改它的功能，而不是在点击节点时折叠和扩展树，我想通过点击链接来实现这个功能。我不知道怎么做。请帮助我，因为我无法理解javascript代码。我刚从示例中复制了代码并使用过它。

Answer 1

好的回答我认为你的问题是什么，

您需要为链接添加点击功能（并且可能会删除节点本身的点击功能）。

使用Javascript：

function clickLink(d) {
        d = d.target;
        d = toggleChildren(d);
        update(d);
        centerNode(d);
    }

然后，您需要修改链接enter方法并将点击侦听器链接到它。使用Javascript：

// 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
                });
            })
            .on('click', clickLink); // <--- Add this part.

然后，您可以选择通过添加CSS使链接看起来clickable CSS：

.node, .link {
    cursor: pointer;
  }

或者，您可能希望为用户提供更大的点击目标，以便将stroke-width值增加到更大的值 CSS：

.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 4px;
  }

根据此要点http://bl.ocks.org/robschmuecker/0f29a2c867dcb1b44d18

在此处演示https://gist.github.com/robschmuecker/0f29a2c867dcb1b44d18

P.S。您可以随时在我的博客上询问：）

D3 js拖放Zoomable Tree帮助折叠由某个链接连接的节点

1 个答案: