如何在d3行创建弯曲

Question

如何在d3行中创建弯曲。

我构造了具有锋利边缘的线条（参见：http://jsfiddle.net/sxg6e4wj/），但并不完全确定如何在边缘处创建弯曲。

var lineData = [ { "x": 20, "y": 20}, { "x": 20,  "y": 40},
                 { "x": 0,  "y": 40}, { "x": 0,   "y": 60} ];

var lineFunction = d3.svg.line()
 .x(function(d) { return d.x; })
 .y(function(d) { return d.y; })
 .interpolate("linear");

d3.select('body')
  .append("svg")
  .attr("width", 500)
  .attr("height", 500)
  .append('path')
  .style('fill', 'none')
  .style('stroke', 'blue')
  .style('stroke-width', 5)
  .attr('d', lineFunction(lineData));

Answer 1

您可以使用stroke-linejoin样式来获得圆角线连接。

d3.select('body')
  .append("svg")
  .attr("width", 500)
  .attr("height", 500)
  .append('path')
  .style('fill', 'none')
  .style('stroke', 'blue')
  .style('stroke-width', 5)
  .style("stroke-linejoin","round")
  .attr('d', lineFunction(lineData));

如果要制作更大的曲线，则必须在路径的每个段之后添加曲线。这是一个JSFiddle，其中包含我用于其中一个项目的示例代码。代码主要基于pathSegList和createSVGPathSegCurvetoQuadraticAbs方法。希望这会有所帮助。

Answer 2

根据您要实现的目标，仅使用其他interpolate功能就足够了，例如basis。

var lineFunction = d3.svg.line()
 .x(function(d) { return d.x; })
 .y(function(d) { return d.y; })
 .interpolate("basis");

有关行的更多选项，请参阅此处：Lines & Paths

如果这还不够，你可以查看svg路径（see here）并像Béziers一样编写自定义生成器here。

我希望有所帮助！