首页>Program>source

我目前正在从事图形可视化工作,并且使用SVG和D3库.设计师询问我是否可以将图形边缘的箭头放在与线条长度的80%相对应的位置上。 通过使用getPointAtLength方法,我能够实现第一部分-获取位置.

var svg = d3.select("body").append("svg")
   .attr("width", 960)
   .attr("height", 500)
var path = svg.append("path")
   .attr("d", "M20,20C400,20,20,400,400,400")
   .attr("fill", "none")
   .attr("stroke", "black");
var pathEl = path.node();
var pathLength = pathEl.getTotalLength();
var pathPoint = pathEl.getPointAtLength(pathLength*0.5);
var point = svg.append("svg:circle")
   .style("fill", "red")
   .attr("r", 5)
   .attr("cx", pathPoint.x)
   .attr("cy", pathPoint.y);

这是jsfidle示例

现在,我想知道如何将箭头以相应的方向附加到该位置.更重要的是如何执行此操作,以便在移动关联节点时可以更新图形的边缘。 我还找不到任何答案,"标记"上的示例正在使用路径属性,例如:style('marker-end'," url(#end-arrow)")

最新回答
  • 7月前
    1 #

    首先,SO的长答案.快速答案是SVG

    (基本)简短答案:在红点之前一点,测量斜率并在两点之间画一条线.现在,问题简化为:如何在直线的末端添加箭头? 使用快速解答。

    将此添加到您的代码中以可视化答案:-

    var pathPoint2 = pathEl.getPointAtLength(pathLength*0.78);
    var point2 = svg.append("svg:circle")
        .style("fill", "blue")
        .attr("r", 3)
        .attr("cx", pathPoint2.x)
        .attr("cy", pathPoint2.y);
    var slope = (pathPoint.y - pathPoint2.y)/(pathPoint.x - pathPoint2.x);
    var x0 = pathPoint2.x/2;
    var y0 = slope*(x0 - pathPoint.x) + pathPoint.y;
    var line = svg.append("svg:path")
        .style("stroke","green")
        .attr("d", "M" + pathPoint.x + "," + pathPoint.y + " L" + x0 +","+ y0);
    

  • python 3.x:自动将散景图拟合到屏幕上?
  • asp.net mvc:如何通过URL传递日期,以便在MVC中读取我的操作?