javascript - 如何在 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

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

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方法。希望这会有所帮助。