D3 js拖放可縮放樹幫助摺疊由某個鏈接連接的節點

我是D3.js的新手我已經遵循示例Drag and Drop Zoomable Tree。我想修改它的功能，而不是在點擊節點時摺疊和擴展樹，我希望通過單擊鏈接來實現此功能。我不知道該怎麼做。請幫助我，因爲我無法理解JavaScript代碼。我剛剛從示例中複製了代碼並使用了它。D3 js拖放可縮放樹幫助摺疊由某個鏈接連接的節點

來源

2014-06-07 user3313379

那麼你有什麼試過？「鏈接」是什麼意思？ –

鏈接表示連接樹中兩個節點的連接線。我已經在我的問題的第一行中集成了鏈接中給出的示例。現在我想修改該代碼以實現我的目標。我不知道該怎麼做 – user3313379

OK回答什麼，我覺得你的問題是，

您需要添加一個點擊功能的鏈接（也許去除點擊功能節點本身）。

的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.你可以一直問我的博客:)

來源

2014-06-20 20:41:53

D3 js拖放可縮放樹幫助摺疊由某個鏈接連接的節點

回答

相關問題