使用D3.js绘制折线图时折线无法显示的问题求助

核心问题分析与修复步骤 #

1. 数据类型不匹配（比例尺无法正确映射） #

你的tempData里的Year是字符串格式（比如'1990'），但xScale用的是scaleTime()，必须传入Date对象才能正确映射；value也是字符串（比如'100'），yScale是线性比例尺，需要数字类型才能计算位置。

修改数据转换逻辑：

var tempData = getDataSet("Afghanistan").map(d => ({
  Year: new Date(d.Year, 0, 1), // 注意D3中月份从0开始，1月对应0
  value: +d.value // 强制转换为数字
}));

2. 时间比例尺范围不足 #

你设置的xScale定义域是[1990, 2013]，但tempData的年份到2020，超出范围的部分会被绘制到可视区域外，导致折线看不到。需要根据实际数据调整定义域：

var minYear = d3.min(tempData, d => d.Year);
var maxYear = d3.max(tempData, d => d.Year);
var xScale = d3.scaleTime().domain([minYear, maxYear]).range([0, width - 150]);

3. Path元素数据绑定错误 #

D3绘制单条折线时，path元素需要绑定整个数据数组，而不是单个数据项。应该用datum()（绑定单个数据对象）或者把数组包裹进另一个数组用data()，同时必须设置fill: none，否则路径会被默认填充成黑色块，覆盖线条：

g.append("path")
  .datum(tempData)
  .attr("class","line")
  .attr("stroke", "red")
  .attr("stroke-width",5)
  .attr("fill", "none") // 关键：避免填充遮挡线条
  .attr("d", line);

4. 异步代码顺序问题 #

原代码中yScale的定义域是在d3.csv的回调里设置的，但绘制折线的代码在回调外，可能导致比例尺还没初始化就被使用。如果tempData是独立数据集，应该单独计算它的y轴范围：

var maxValue = d3.max(tempData, d => d.value);
yScale.domain([0, maxValue]);

完整修复后的代码片段 #

function drawLineChart(){
    lsvg.selectAll("*").remove();

    var width = 975;
    var height = 600;

    var g = lsvg.append("g").attr("transform","translate(" + 50+ "," + 50 + ")");

    // 处理数据类型
    var tempData = getDataSet("Afghanistan").map(d => ({
        Year: new Date(d.Year, 0, 1),
        value: +d.value
    }));

    // 根据实际数据设置比例尺
    var minYear = d3.min(tempData, d => d.Year);
    var maxYear = d3.max(tempData, d => d.Year);
    var xScale = d3.scaleTime().domain([minYear, maxYear]).range([0, width - 150]);

    var maxValue = d3.max(tempData, d => d.value);
    var yScale = d3.scaleLinear().domain([0, maxValue]).range([height - 100, 0]);

    // 绘制X轴
    g.append("g")
        .attr("transform", "translate(20," + (height - 100) + ")")
        .call(d3.axisBottom(xScale).ticks(d3.timeYear))
        .append("text")
        .attr("y",40)
        .attr("x",350)
        .attr("stroke","black")
        .attr("fill","black")
        .attr("font-size",25)
        .text("Year");

    // 绘制Y轴
    g.append("g")
        .attr("transform", "translate(20,0)")
        .call(d3.axisLeft(yScale).ticks(10))
        .append("text")
        .attr("transform", "rotate(270)")
        .attr("y", -50)
        .attr("x",-150)
        .attr('stroke', 'black')
        .attr("fill","black")
        .attr("font-size",25)
        .text('AIDS-Related Deaths');

    // 定义折线生成器
    let line = d3.line()
        .x(function(d){return xScale(d.Year);})
        .y(function(d){return yScale(d.value);});

    // 绘制折线
    g.append("path")
        .datum(tempData)
        .attr("class","line")
        .attr("stroke", "red")
        .attr("stroke-width",5)
        .attr("fill", "none")
        .attr("d", line);    
}

内容的提问来源于stack exchange，提问作者Devon Bauman