D3弧形与雪佛龙形端

Question

我使用D3.js 绘制了弧线,默认情况下它具有方形末端.

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

如何在其一端绘制带有V形的弧形.

Answer 1

我想我明白你在找什么,所以我会试一试:

正如您可能从d3.js文档中猜到的那样,d3.arc()没有在一端指出所需的方法.在两端都应用了填充和圆角,我看不出它们如何在两端形成一个点,更不用说一个点了.

我想到了两种解决方案(可能还有很多我甚至无法想到的解决方案)

1. 根据每个圆弧的末端角度,从每个圆弧的末端垂下,并附加一个三角形或其他类似的形状(或者,应用某种类型的蒙版将末端修剪成一个点)
2. 尝试根据您的需求重新设计d3.arc(),接受以模块化方式开发/改进d3的邀请.

就个人而言,我认为选项一可能不那么干净,可能更难设计.选项二应该是可行的,并鼓励潜入并制作模块:

小文件很不错,但模块化也使D3更有趣.微型库更容易理解,开发和测试.它们使新人更容易参与并做出贡献.它们减少了"核心模块"和"插件"之间的区别,并加快了D3功能的开发速度.(https://github.com/d3/d3/blob/master/CHANGES.md)

我以为我会放手一搏.

我总结了一个基于d3.arc()函数的雪佛龙尖端弧模块的开始尝试.

d3-shape.js模块中d3.arc()函数的圆角部分可能是最佳的显示位置,因为它显示了对弧端的修改.在圆角的情况下,修改弧的模块部分如下所示:

      context.arc(t0.cx, t0.cy, rc1, Math.atan2(t0.y01, t0.x01), Math.atan2(t0.y11, t0.x11), !cw);
      context.arc(0, 0, r1, Math.atan2(t0.cy + t0.y11, t0.cx + t0.x11), Math.atan2(t1.cy + t1.y11, t1.cx + t1.x11), !cw);
      context.arc(t1.cx, t1.cy, rc1, Math.atan2(t1.y11, t1.x11), Math.atan2(t1.y01, t1.x01), !cw);

首先处理外边缘(并在上面显示).第一条线是后角外侧的圆角,第三条线是前方外侧角的圆角.只需移除第三条线即可形成尖角弧(如果从内边缘移除它).然后剩下的挑战是使弧的另一端平坦,我通过使用起始角度和内外半径来找到弧的拐角以形成平坦的末端.

最终结果如下:

// get tail coordinate (outer)
    var tailOuter = {};
    tailOuter.x = Math.cos(a0) * r1; // a0 = starting angle
    tailOuter.y = Math.sin(a0) * r1; // r1 = outer radius

     context.moveTo(tailOuter.x, tailOuter.y);
     context.arc(0, 0, r1, Math.atan2(t0.cy + t0.y11, t0.cx + t0.x11), Math.atan2(t1.cy + t1.y11, t1.cx + t1.x11), !cw);

我已经整理了一个快速而脏的模块,它接受了d3.arc()函数并创建了一个d3.cheveronArc()函数.这是d3.arc()的内部修改,只有四种方法(inner/outerRadius(),start/endAngle()).它无法检查可能导致不良行为的参数(例如:V形臂比弧形长).它仅仅是一个概念证明,尽管我很满意它如何寻找一个相当快速的尝试:

正如您可能注意到的那样,最内圈在其尾部附近有一个奇怪的形状,小的内半径似乎会引起一些类似的问题.

该代码可在以下网址查看:http: //bl.ocks.org/andrew-reid/3375e602cc6c00c4e3ea4799d171ee27

看着它,我觉得我想添加选项,在弧形的后端添加V形的反转以获得更好的视觉效果,但这是一个不同的问题.