为什么写这篇文章
起因是我想通过d3画一条光滑的曲线像下图这样，但不知道从何下手
我知道d3内部是通过svg实现的，所以我去看svg的教程，从而知道了可以通过path画任意图形或线条，也知道了需要通过设置贝塞尔曲线来实现。
svg教程中关于path介绍很简单，自己也大概的试了试，但一直没明白贝塞尔曲线，控制点的坐标值，实际应该怎么确定。于是疯狂百度，疯狂必应，搜到的大部分文章，都是告诉我，什么是贝塞尔曲线，以及贝塞尔曲线的公式。说实话这不是我想要的，或许是我悟性不足或者搜索方式不对。我只想知道贝塞尔曲线实际怎么用，怎么确定控制点的值而已，为什么找不到答案。直到我看到了这篇文章 SVG ---- 在流程图/类图中 使用二次贝塞尔曲线 画出漂亮的箭头 开始有了点感觉。所以我要记录下来，一来防止自己之后忘记，二来期望能帮助同样有类似困惑的人。
关于贝塞尔曲线的自我理解
贝塞尔曲线，就是根据控制点，将一根直线转变为曲线。
我通过如下方式理解这个控制点
你想象一下，你面前有一根斜向拉直的皮筋，你可以用一根筷子，拨弄这跟皮筋，原本是斜向拉直的皮筋就产生了弯曲，而这个筷子与皮筋的接触点，你就可以想象为是贝塞尔曲线的控制点（当然这在概念上并不正确），你左手的那一侧是Y轴，右手的上侧是X轴，类似下面的三幅图，你想将这条斜线弄成什么样的曲线，就向对应方向拨弄，然后再在坐标系上确认这个接触点的X，Y轴坐标位置。如第二个图，控制点的Y轴坐标与终点的Y轴坐标相近。第三个图，控制点的X轴坐标与起点的X轴坐标相近
最开始用到的那条曲线设置方式
<html>
<body>
<svg width="300" height="250">
<path
d="M10 80,L10 65, Q10 60 15 60, L90 60,Q95 60 95 55,L95 35"
fill="none"
stroke="black"
stroke-width="2"
/>
</svg>
</body>
</html>
这个算是我实验/测试的过程
<html>
<body>
<svg width="300" height="250">
<path
d="M10 80,L10 65, Q10 60 15 60, L90 60,Q95 60 95 55,L95 35"
fill="none"
stroke="black"
stroke-width="2"
/>
</svg>
<svg width="300" height="250">
<path
d="M10 80, L10 65, L15 60, L95 60, L100 55,L100 40"
fill="none"
stroke="black"
stroke-width="5"
/>
</svg>
<svg width="300" height="250">
<path
d="M10 80, L10 60, L100 60, L100 40"
fill="none"
stroke="black"
stroke-width="5"
/>
</svg>
</body>
</html>
