Javascript 如何在d3线中创建折弯

如何在d3线中创建折弯

我已经构建了带有锐边的线条（请参见：），但不完全确定如何在边缘创建折弯

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));

---

根据您想要实现的目标，只需使用不同的

插值

函数即可，例如

basis

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

有关行的更多选项，请参见此处：

如果这还不够，您可以查看svgpath（）并编写自定义生成器，如图所示

---

我希望这有帮助

根据您想要实现的目标，只需使用不同的

插值

函数即可，例如

basis

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

有关行的更多选项，请参见此处：

如果这还不够，您可以查看svgpath（）并编写自定义生成器，如图所示

---

我希望这有帮助

您可以使用

笔划线条连接

样式获得圆角线条连接

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));

---

如果要生成更大的曲线，则必须在路径的每个分段后添加曲线。下面是我在一个项目中使用的示例代码。代码主要基于和方法。希望这有帮助。

您可以使用

笔划线条连接

样式来获得圆角线条连接

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));

如果要生成更大的曲线，则必须在路径的每个分段后添加曲线。下面是我在一个项目中使用的示例代码。代码主要基于和方法。希望这有帮助