折线面积图未显示

Question

我正在使用 d3 处理折线面积图。但不知何故，图表没有显示，控制台也没有错误。我无法弄清楚这个问题。如果有人可以帮助我，那将很有帮助。

我已经在 Codepen 中添加了全部代码。这是 link

参考示例代码如下：

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

提前致谢！

Answer 1

我已经为您的代码创建了一个 fork，其中显示了线条和区域。

主要变化如下。

首先，我将字符串解析为日期：

const parseTime = d3.timeParse("%b %Y");
const parsedData = bar_chart_data.map(val => ({
  close: val.y,
  date: parseTime(val.x)
}));

parsedData 现在是一个对象数组，因此我们可以相应地更新比例：

const xScale = d3.scaleTime()
    // extent returns an array containing the min and max
    .domain(d3.extent(parsedData, d => d.date))
    .range([0, width]);

const yScale = d3.scaleLinear()
    .domain([0, d3.max(parsedData, d => d.close)])
    .range([height, 0]);

接下来，我将 d3.line() 切换为 d3.area()，因为您想在线下方绘制一个区域。这将使您不必手动构建该区域的“d”属性。

const area = d3.area()
    .x(d => xScale(d.date))
    .y1(d => yScale(d.close)) // top line
    .y0(yScale(0)) // base line, always at 0
    .curve(d3.curveCatmullRom.alpha(0.5));

对于绘制线和区域，我们不需要进行数据连接，我们只需使用 append() 并将 parsedData 数组传递给 area 生成器即可区域和顶行 area.lineY1():

svg.append("path")
    .attr("d", area(parsedData))
    .style("fill", "url(#gradient)");

svg.append("path")
    .attr("d", area.lineY1()(parsedData))
    .attr("stroke-width", "2")
    .style("fill", "none")
    .style("filter", "url(#glow)")
    .attr("stroke", "#e4647f");

折线面积图未显示

Line - area chart not showing

javascript

d3.js

linechart

area-chart