0

次の図のような視覚効果を作成しようとしています: http://imageshack.us/photo/my-images/52/97003573.png/ [選択した量の頂点とそれらを接続するエッジが概要] 私は一般的に JavaScript を使用して SVG とグラフィックスに慣れていないため、これを行う方法のコード例をいただければ幸いです。ありがとう

4

2 に答える 2

1

これは、ストロークラインキャップの値が「ラウンド」の非常に太い「リンク」ラインをさらに 2 セット追加することで実現できました。これは、同様の方法で選択したラインに拡張できます。

リンク画像

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 を参照してください。これは、同様の方法で選択した行に拡張できます

于 2012-05-01T03:24:34.590 に答える
-1

IDまたはクラスに基づいてselectAllを実行するのは難しいですか? SVG と CSS の両方がこのようなものをサポートしているため、その後 CSS を使用して影を追加できます。

于 2012-04-29T20:48:17.403 に答える