javascript - 如何在d3线中创建折弯

如何在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));

最佳答案

您可以使用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方法。希望这可以帮助。

关于javascript - 如何在d3线中创建折弯，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28314056/