如何在d3.js中为选定的边和顶点创建轮廓？

Question

我正在尝试创建一个视觉效果，如下图所示： http://imageshack.us/photo/my-images/52/97003573.png/ [选定数量的顶点和连接它们的边将被轮廓包围] 我会很感激任何代码示例如何做到这一点，因为我是一般的新手SVG和图形。 感谢

Answer 1

我能够通过增加两组非常厚的链接来实现这一目标。 line，line-linecap值为＆＃34; round＆＃34;，可以类似的方式扩展到您选择的行。

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都支持这样的东西。