使用 d3 绘制箭头答案

【问题标题】：Drawing arrows using d3使用 d3 绘制箭头
【发布时间】：2015-01-03 12:32:13
【问题描述】：

在这个小提琴中，我试图画一个箭头：

var svgContainer = d3.select("body").append("svg")
            .attr("width", 1200)
            .attr("height", 1200)
            .attr("text-align" , "center");

    var arrowStartPosition = 5
    var arrowSpacing = 60
    var verticalStrokeColor = "black"
    var arrowYStartPosition = 5
    var arrowYEndStartPosition = 150
    var margin = 150;

    var labelLine = svgContainer.append("line")
            .attr("x1", arrowStartPosition + margin)
            .attr("y1", arrowYStartPosition)
            .attr("x2", arrowStartPosition + margin)
            .attr("y2", arrowYEndStartPosition)
            .attr("stroke-width", 2)
            .attr("stroke", verticalStrokeColor);

    var right = svgContainer.append("line")
            .attr("x1", arrowStartPosition + margin)
            .attr("y1", arrowYStartPosition)
            .attr("x2", 20 + margin)
            .attr("y2", 20)
            .attr("stroke-width", 2)
            .attr("stroke", "black");

    var left = svgContainer.append("line")
            .attr("x1", right.attr("x1")-15)
            .attr("y1", right.attr("y1")+15)
            .attr("x2", 5 + margin)
            .attr("y2", 5)
            .attr("stroke-width", 2)
            .attr("stroke", "black");

为了尝试保持代码通用，我试图根据右侧的位置绘制箭头的左侧部分：

.attr("y1", right.attr("y1")+15)

但是从小提琴中可以看出：

https://jsfiddle.net/Qh9X5/3447/

箭头未正确绘制。

我认为这是因为right.attr("y1") 值在绘图时未初始化？

任何关于实现相同结果的更优雅方法的指针表示赞赏。

【问题讨论】：

抱歉revision 总结（想写'http:// to https://'）。

标签： javascript jquery d3.js

【解决方案1】：

无需 JavaScript！使用SVG<marker/>：

  <svg>
    <defs>
      <marker id="arrow-head" markerWidth="13" markerHeight="13" refx="5" refy="5" orient="auto">
        <path d="M0,0 L0,10 L10,5 L0,0" style="fill: #000000;" />
      </marker>
    </defs>

    <path d="M0,0 L10,20 L20,50 L30,30 L40,40 L50,50" style="stroke: #000000; stroke-width: 1px; fill: none; marker-end: url(#arrow-head);"/>
  </svg>

Here's a demo in JSBin

【讨论】：

谢谢，但我会画多条线和箭头。即使您的代码是惯用的，我也无法掌握如何将这些行链接在一起。我从 d3 开始，所以也许及时可以使用你提供的东西。

【解决方案2】：

如果要根据右侧位置定义左侧位置，则唯一需要更改的值是x2。

var left = svgContainer.append("line")
        .attr("x1", right.attr("x1"))
        .attr("y1", right.attr("y1"))
        .attr("x2", right.attr("x2")-30)
        .attr("y2", right.attr("y2"))
        .attr("stroke-width", 2)
        .attr("stroke", "black");

JSFiddle

【讨论】：