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

Question

I am trying to create a visual effect as in the following drawing: http://imageshack.us/photo/my-images/52/97003573.png/ [that a selected amount of vertices and edges connecting them will be surrounded by an outline] I would appreciate any code examples how to do this as I am new to SVG and graphics through javascript in general. Thanks

Answer 1

I was able to accomplish this by adding two more sets of very thick 'link' lines, with stroke-linecap values of "round", that can be extended to your selected lines in a similar fashion.

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");

See an updated jsfiddle of this at http://jsfiddle.net/s2f8L/8/ . This can be extended to your selected lines in a similar fashion

Answer 2

Is it that hard to do a selectAll based on id or class? You could add shadows using CSS after that as SVG and CSS both offer support for something like this.