如何在d3.js中為選定的邊和頂點創建輪廓？

Question

我正在嘗試創建如下圖所示的視覺效果： http : //imageshack.us/photo/my-images/52/97003573.png/ [選定數量的頂點和連接它們的邊將被包圍。概述]我將不勝感激任何代碼示例如何執行此操作，因為我一般都是通過javascript來接觸SVG和圖形的。 謝謝

Answer 1

通過添加兩套非常粗的“鏈接”線（具有筆畫線帽值“ round”）可以完成此操作，這些線可以以類似的方式擴展到您選擇的線。

var linkoutline = svg.selectAll(".outline")  
    .data(json.links)
  .enter().append("svg:line")
    .attr("class","outline")
    .style("stroke","red")
    .style("stroke-width",20)
    .style("stroke-linecap","round");
var linkback = svg.selectAll(".backline")
    .data(json.links)
  .enter().append("svg:line")
    .attr("class","backline")
    .style("stroke","white")
    .style("stroke-width",18)
    .style("stroke-linecap","round");

在http://jsfiddle.net/s2f8L/8/上查看更新的jsfiddle。 可以類似的方式將其擴展到您選擇的行

Answer 2

基於id或class進行selectAll很難嗎？ 之后，您可以使用CSS添加陰影，因為SVG和CSS都提供了對此類功能的支持。