D3弧形，人字形末端 [英] D3 Arc With Chevron Shaped End

问题描述

我使用D3.js绘制了 arc ，默认情况下，该正方形为正方形形的末端.

I've drawn an arc using D3.js which by default has square shaped ends.

var arc = d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI);
d3.selectAll('svg')
    .append('path')
    .attr('d', function() {
        return arc();
    });

如何在一端绘制人字形弧.

How can I draw an arc with a chevron shape on one end of it.

推荐答案

我只是将d3的路径生成器与SVG标记一起使用.将任何形状添加到任何路径.通过编辑标记定义来编辑端点".使用D3路径生成器定义圆弧(或任何路径).

I would just use d3's path generator with an SVG marker. Add any shape to any path. Edit the "ends" by editing the marker definition. Use D3 path generator to define your arc (or any path).

值得注意的是，如果采用这种方法，则必须使用d3路径生成器而不是d3弧形生成器，因为弧形生成器会隐式关闭路径(将"end"标记放回路径的开头).

It's worth noting that if you take this approach you have to use the d3 path generator rather than the d3 arc generator because the arc generator implicitly closes the path (putting your "end" marker back at the beginning of the path).

在我的示例中，我也将人字形添加到开头，只是为了表明它与添加.attr("marker-start","url(#chevron)")和.attr("marker-end","url(#chevron)")

In my example, I added the chevron to the start as well just to show that it's as trivial as adding .attr("marker-start","url(#chevron)") and .attr("marker-end","url(#chevron)")

D3路径生成器 | https://github.com/d3/d3-path/blob/master/README.md#path

SVG标记 | https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/marker

，现在我想到了，您可能可以使用d3.symbols为您生成标记/末端，而无需手动定义形状路径.人字形必须是自定义的，但您可以使用三角形符号.

edit: and now that I think of it, you can probably use d3.symbols to generate your markers/ends for you instead of manually defining the shape path. The chevron would have to be custom, but you could probably use the triangle symbol.

D3符号 | | https://github.com/d3/d3-shape#symbols

console.clear()

var path = d3.path()
path.arc(225,80,70,1,-.5)

var path2 = d3.path()
path2.moveTo(20,20)
path2.bezierCurveTo(150,300,200,0,450,100)

d3.select("svg").append("path")
  .attr("d", path2.toString())
  .attr("stroke","steelblue")
  .attr("fill","none")
  .attr("stroke-width","20")
  .attr("marker-start","url(#chevron)")
  .attr("marker-end","url(#chevron)")

d3.select("svg").append("path")
  .attr("d", path.toString())
  .attr("stroke","#43A2CA")
  .attr("fill","none")
  .attr("stroke-width","20")
  .attr("marker-start","url(#chevron)")
  .attr("marker-end","url(#chevron)")

<script src="https://unpkg.com/d3@4.4.0"></script>
<?xml version="1.0"?>
<svg width="500" height="200" viewBox="0 0 500 200">

  <defs>
    <marker id="chevron"
      viewBox="0 0 20 20" refX="10" refY="10" 
      markerUnits="userSpaceOnUse"
      markerWidth="20" markerHeight="20"
      orient="auto" fill="black">
      <path d="M0 0 10 0 20 10 10 20 0 20 10 10Z" />
    </marker>
  </defs>

</svg>

这篇关于D3弧形，人字形末端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！