d3.js 如何绘制封闭曲线?

ar5n3qh5  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(208)


红框区域是让我烦恼的部分,那是路径的起点和终点,但它没有曲线效果
我代码很简单:

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')
pod7payv

pod7payv1#

在我看来,在你的数据中,最后一个点和第一个点的位置是相同的,只是为了“闭合”路径。如果是这样的话,只要删除最后一个点,并使用d3.curveBasisClosed,这样D3就会为你闭合路径:
第一个

相关问题