Question

我正在尝试在D3.js可视化中为线段添加起始和结束标记。相关代码如下：

let headMarker = defs.append("marker")
  .attr("id", "markerHead")
  .attr("overflow", "visible")
    .append("circle")
    .attr("r", "2.5");

let tailMarker = defs.append("marker")
  .attr("id", "markerTail")
  .attr("markerWidth", 13)
  .attr("markerHeight", 13)
  .attr("refX", 2)
  .attr("refY", 6)
  .attr("orient", "auto")      
    .append("path")
    .attr("d", "M2,2 L2,11 L10,6 L2,2 z")
    .style("fill", "magenta");

这导致以下标记：

<marker id="markerHead" overflow="visible"></marker>
<marker id="markerTail" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
    <path d="M2,2 L2,11 L10,6 L2,2 z" style="fill: magenta;"></path>
</marker>

如果我将circle更改为path等其他svg标记，则可以正常使用。

如果我打印与圆圈附加相关的选择，我可以看到创建了一个实例，并且它有一个未定义的父字段。

任何可以帮助我的提示/更正？

我可以使用路径绘制圆圈，但这个例子直接来自SVG书籍，我想了解它。

如何将D3中的圆圈添加到D3中的标记？

0 个答案: