紅框區域是我比較煩的部分，那是路徑的起點和終點，但是沒有曲線效果
我的代碼很簡單：
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')
uj5u.com熱心網友回復：
在我看來，在您的資料中，最后一點與第一個點位于同一位置，只是為了“關閉”路徑。如果是這種情況，只需洗掉最后一點并使用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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/528787.html