17

この例では：

http://jsfiddle.net/maxl/mNmYH/2/

円を拡大すると、例：

var radius = 30; // (is 6 in the jsFiddle)
var circle = svg.append("svg:g").selectAll("circle")
.data(force.nodes())
.enter().append("svg:circle")
.attr("r", radius)

円の半径を指すように矢印の描画を適切に調整するための最良の方法は何ですか？

ありがとう

4

1 に答える 1

14

あなたは「矢印の描画を適切に調整するための最良の方法」を求めました。次のアプローチが「最善の」方法であるとは言えません。他の回答を楽しみにしていますが、この問題に取り組む1つの方法を次に示します。

http://jsfiddle.net/Y9Qq3/2/

関連する更新を以下に示します。

...
var w = 960,
    h = 500
    markerWidth = 6,
    markerHeight = 6,
    cRadius = 30, // play with the cRadius value
    refX = cRadius + (markerWidth * 2),
    refY = -Math.sqrt(cRadius),
    drSub = cRadius + refY;

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

... 
function tick() {
    path.attr("d", function (d) {
        var dx = d.target.x - d.source.x,
            dy = (d.target.y - d.source.y),
            dr = Math.sqrt(dx * dx + dy * dy);
        return "M" + d.source.x + "," + d.source.y + "A" + (dr - drSub) + "," + (dr - drSub) + " 0 0,1 " + d.target.x + "," + d.target.y;
    });
 ...
于 2013-02-25T19:07:12.480 に答える