CODEWITHSUNDEEP
d3.jspositionmarker
nlv
nlv

Reputation: 831

D3 line/ path/ marker position

Say I have the following network path/ chart jsFiddle

I have fixed radius of my bubble, which is 10 and I tell where to put the arrow head on the line - 

.attr("refX", 27)  .attr("refY", 5)

Say I have different bubble sizes and if the bubble size is more than 10 obviously it hides my arrow head. Could someone please explicitly (preferably with an altered example) explain how could I efficiently check the bubble size and alter the position of the arrow head or maybe shorten the length of the line/ path/ connector and put the arrow head at the end of the line/path/ connector?

Upvotes: 2

Views: 1401

Answers (1)

divakar
divakar

Reputation: 1379

Hey i have updated your fiddle with some code check out

FIDDLE

 d3.select("#arrow").attr("viewBox", "0 0 10 10")
                            .attr("refX", 27)
                            .attr("refX", function (d) { console.log( d )
                            $('circle').each(function(){
                            if($(this).attr('r')>5)
                            {
                           return d3.select(this).attr("refY",5);
                            }
                            else
                            {
                            //return some value 
                            }
                            });

                                                       })
                            .attr("refY", 5)
                            .attr("markerUnits", "strokeWidth")
                            .attr("markerWidth", 8)
                            .attr("markerHeight", 6)
                            .attr("orient", "auto")
                            .style("stroke", "#ccc")
                            .append("svg:path")
                            .attr("d", "M 0 0 L 10 5 L 0 10 z");

Upvotes: 1

Related Questions