如何绘制封闭曲线？

Question

红框标记的区域让我感到烦恼，那是路径的起点和终点，但它没有曲线效果。

我的代码很简单：

const svg = d3.select("svg");
        let data = [[1, 3], [2, 4], [3, 4], [5, 6], [6, 5], [7, 3], [6, 1], [4, 2], [2, 2], [1, 3]]
        let datax = data.map(v => v[0])
        let datay = data.map(v => v[1])

        let scale_x = d3.scaleLinear()
            .domain([d3.min(datax), d3.max(datax)])
            .range([0, 960])
        let scale_y = d3.scaleLinear()
            .domain([d3.min(datay), d3.max(datay)])
            .range([500, 0])

        let curve_generator = d3.line()
            .x((d) => scale_x(d[0]))
            .y((d) => scale_y(d[1]))
            .curve(d3.curveBasis)

        svg.append('path')
            .attr('d', curve_generator(data))
            .attr('stroke', 'gray')
            .attr('stroke-width', 2)
            .attr('fill', 'none')

- 王敬伟

Answer 1

在你的数据中，最后一个点与第一个点位于同一位置，只是为了“封闭”路径。如果是这种情况，只需删除最后一个点并使用d3.curveBasisClosed即可，D3将自动为您关闭路径：

const svg = d3.select("svg");
let data = [
  [1, 3],
  [2, 4],
  [3, 4],
  [5, 6],
  [6, 5],
  [7, 3],
  [6, 1],
  [4, 2],
  [2, 2]
]
let datax = data.map(v => v[0])
let datay = data.map(v => v[1])

let scale_x = d3.scaleLinear()
  .domain([d3.min(datax), d3.max(datax)])
  .range([0, 300])
let scale_y = d3.scaleLinear()
  .domain([d3.min(datay), d3.max(datay)])
  .range([150, 0])

let curve_generator = d3.line()
  .x((d) => scale_x(d[0]))
  .y((d) => scale_y(d[1]))
  .curve(d3.curveBasisClosed)

svg.append('path')
  .attr('d', curve_generator(data))
  .attr('stroke', 'gray')
  .attr('stroke-width', 2)
  .attr('fill', 'none')

<script src="https://d3js.org/d3.v7.min.js"></script>
<svg></svg>

- Gerardo Furtado