我正在使用 d3 处理折线图。但不知何故,图表没有显示,控制台中也没有错误。我无法弄清楚这个问题。如果有人可以帮助我,那将会很有帮助。
我已经在 Codepen 中添加了整个代码。这是链接
这是 ref 的示例代码:
const svg = d3.select("#chart")
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
svg.append('defs');
svg.call(createGradient);
svg.call(createGlowFilter);
const xScale = d3.scaleTime()
.domain([
d3.min(parsedData, d => d3.min(d.values, v => v.x)),
d3.max(parsedData, d => d3.max(d.values, v => v.x))
])
.range([0, width]);
const yScale = d3.scaleLinear()
.domain([
d3.min(parsedData, d => d3.min(d.values, v => v.y)),
d3.max(parsedData, d => d3.max(d.values, v => v.y))
])
.range([height, 0]);
const line = d3.line()
.x(d => xScale(d.x))
.y(d => yScale(d.y))
.curve(d3.curveCatmullRom.alpha());
svg.selectAll('.line')
.data(parsedData)
.enter()
.append('path')
.attr('d', (d) => {
const lineValues = line(d.values).slice(1);
const splitedValues = lineValues.split(',');
return `M0,${height},${lineValues},l0,${height - splitedValues[splitedValues.length - 1]}`
})
.style('fill', 'url(#gradient)')
svg.selectAll('.line')
.data(parsedData)
.enter()
.append('path')
.attr('d', d => line(d.values))
.attr('stroke-width', '2')
.style('fill', 'none')
.style('filter', 'url(#glow)')
.attr('stroke', '#e4647f');
提前致谢!