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

Question

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

Answer 1

我能够通过添加另外两组非常粗的“链接”线来实现这一点，笔划线帽值为“圆形”，可以以类似的方式扩展到您选择的线。

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 都提供对此类的支持。