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

根据您想要实现的目标，使用不同的 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) and write your custom generator like for Béziers, as here.

希望对您有所帮助！

Answer 2

您可以使用 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 with sample code that I have used for one of my projects. Code is mainly based on pathSegList and createSVGPathSegCurvetoQuadraticAbs 方法。希望这有帮助。

如何在 d3 线中创建弯曲

How to create bend in d3 line

javascript

d3.js