7

半径の異なるいくつかの円/ノードがあり、それらを矢印の端を持つパスに接続する必要があります。

マーカーのコードは次のとおりです。

svg.append("svg:defs").selectAll("marker")
    .data(["default"])
  .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 5)
    .attr("refY", -1.5)
    .attr("markerWidth", 10)
    .attr("markerHeight", 10)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M1,-5L10,0L0,5");

円の半径を配列に保存しました。スクリーンショットは次のとおりです。

ここに画像の説明を入力してください

矢印は実際には円の「内側」にあります。矢印を円の表面に配置するにはどうすればよいですか？

4

4 に答える 4

5

これは本当に面白いです。昨日、この問題を解決しました。

私がしたことは、中央ではなく、ノードの端でパスを終了することです。直線ではなくベジエ曲線を使用しているため、私のケースはより複雑ですが、これが役立つ場合があります。

svg.append("svg:defs").selectAll("marker")
    .data(["default"])
  .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -3 6 6")
    .attr("refX", 5.0)
    .attr("refY", 0.0)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-2.0L5,0L0,2.0"); 


    links
      .attr("fill", "none")
      .attr("d", function(d) {
        var tightness = -3.0;
        if(d.type == "straight")
            tightness = 1000;

        // Places the control point for the Bezier on the bisection of the
        // segment between the source and target points, at a distance
        // equal to half the distance between the points.
        var dx = d.target.x - d.source.x;
        var dy = d.target.y - d.source.y;
        var dr = Math.sqrt(dx * dx + dy * dy);
        var qx = d.source.x + dx/2.0 - dy/tightness;
        var qy = d.source.y + dy/2.0 + dx/tightness;

        // Calculates the segment from the control point Q to the target
        // to use it as a direction to wich it will move "node_size" back
        // from the end point, to finish the edge aprox at the edge of the
        // node. Note there will be an angular error due to the segment not
        // having the same direction as the curve at that point.
        var dqx = d.target.x - qx;
        var dqy = d.target.y - qy;
        var qr = Math.sqrt(dqx * dqx + dqy * dqy);

        var offset = 1.1 * node_size(d.target);
        var tx = d.target.x - dqx/qr* offset;
        var ty = d.target.y - dqy/qr* offset;

        return "M" + d.source.x + "," + d.source.y + "Q"+ qx + "," + qy 
                + " " + tx + "," + ty;  // to "node_size" pixels before
                //+ " " + d.target.x + "," + d.target.y; // til target
      });

ところで; 「ソース」の矢じりについても同じことを行う必要があります（ターゲットにのみあります）

于 2013-03-19T10:20:35.520 に答える
2

円が最初にレンダリングされ、その後に矢印の付いた線がレンダリングされるようにsvg要素を並べ替えることができます（d3には.order方法があります。詳細については、ここを参照してください。記録については、ラファエルAPIの対応する部分についてここで説明します）。

于 2013-03-19T10:52:47.943 に答える