Question

说我有以下网络路径/图表jsFiddle

我有固定的泡泡半径，这是10，我告诉把箭头放在哪里 -

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

假设我有不同的气泡大小，如果气泡大小超过10，显然它会隐藏我的箭头。有人可以明确地（最好有一个改变的例子）说明如何有效地检查气泡尺寸并改变箭头的位置或者可能缩短线/路径/连接器的长度并将箭头放在末端line / path / connector？

Answer 1

嘿，我已经用一些代码检查更新了你的小提琴

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");

D3线/路径/标记位置

1 个答案: