在D3中制作略微弯曲线条的最简单方法

Question

目前我正在绘制这样的行：

line = d3.svg.line()
svg.append('path')
  .datum([from, to])
  .attr('d', line)
  .attr('class', 'line')

而不是这些完全笔直，我希望它们略微弯曲。我不在乎他们弯腰的方向。

我无法弄清楚如何使用D3做到这一点。所有示例似乎都是为了在一系列值之间插入一条线。

Answer 1

http://mbostock.github.io/d3/talk/20111018/tree.html

var diagonal = d3.svg.diagonal()
                  .projection(function(d) { return [d.y, d.x]; });


 // Transition links to their new position.
 link.transition()
      .duration(duration)
      .attr("d", diagonal);

真的，这就是你需要做的，除了可能改变数据/对角线以反映你的情况。

使用对角投影的替代方法是使用Envil链接中描述的路径手动构建曲线。