CODEWITHSUNDEEP
d3.jssvgpath
DK2
DK2

Reputation: 661

d3js link arc filled useless part

enter image description here

here is how my link draw currently. here is below picture code (that comes from my real putout html)

<svg height="1210" width="1400">
<path class="link" id="linkId_2" opacity="0.9468531468531468" style="stroke-width: 5px; marker-end: url(#end-arrow);" d="M652.3404429062306,276.08144057675605A166.53959040529506,166.53959040529506 0 0,1 767.3217566577334,315.4663301140565"></path>
</svg>

But I want to draw like this. (should be like link, not part of circle)

enter image description here

here is my real part of code.

function updateLink() {
    this.attr('d', function(d) {
        var deltaX = d.target.x - d.source.x,
            deltaY = d.target.y - d.source.y,
            dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY),
            normX = deltaX / dist,
            normY = deltaY / dist;
        if( !normX) normX = 0;
        if( !normY) normY = 0;

        var sourcePadding = d.left ? circleSize(d.source.inDegree) + 10 : 20,
            targetPadding = d.right ? circleSize(d.target.inDegree) + 5 : 20,

            sourceX = d.source.x + (sourcePadding * normX),
            sourceY = d.source.y + (sourcePadding * normY),
            targetX = d.target.x - (targetPadding * normX),
            targetY = d.target.y - (targetPadding * normY);

        return "M" + sourceX + "," + sourceY + "A" + dist + "," + dist + " 0 0,1 " + targetX + "," + targetY;
    });
}

Here is example I used (http://bl.ocks.org/mbostock/1153292)

Upvotes: 0

Views: 177

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

If you want the stroke to be unfilled then simply set the fill to none and the stroke to a colour e.g.

<svg height="1210" width="1400" viewBox="600 230 600 600">
<path class="link" id="linkId_2" opacity="0.9468531468531468" style="fill:none;stroke:black;stroke-width: 5px; marker-end: url(#end-arrow);" d="M652.3404429062306,276.08144057675605A166.53959040529506,166.53959040529506 0 0,1 767.3217566577334,315.4663301140565"></path>
</svg>

Upvotes: 1

Related Questions