javascript - D3 v5 : "d" attribute in tag not populating with values

Question

目前正在尝试使用 D3 创建一个简单的折线图，但在显示数据时遇到一些困难。该代码似乎有效(轴生成良好)，但由于某种原因，当我运行代码时，标签中的“d”属性不存在。 “填充”、“描边”和“描边宽度”属性显示良好。

看来我创建的行生成器函数从未使用过(请参阅下面的 console.logs)。我也没有收到任何错误。

d3.csv("./data/myFile.csv").then(d => {
        return { 
            percentile: d.percentile, 
            y50: +d.y50
        };
    }).then(data => {
        var xScale = d3.scalePoint()
            .domain(myDomain)
            .range([0, width])
            .padding(.5);
        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(xScale));

        var yScale = d3.scaleLinear()
            .domain([0, 100])
            .range([height, 0]);
        svg.append("g")
            .call(d3.axisLeft(yScale));

        let line = d3.line()
            .x(d => {
                console.log("THIS DOES NOT PRINT TO CONSOLE");
                return xScale(d.percentile);
            })
            .y(d => {return yScale(d.y50)});

        console.log('THIS PRINTS TO CONSOLE');

        svg.append("path")
            .datum(data)
            .attr("d", line)
            .attr("fill", "none")
            .attr("stroke", "steelblue")
            .attr("stroke-width", 1.5);

        console.log('THIS PRINTS TO CONSOLE');
    });

这是我在浏览器中看到的内容(我希望还有一个“d=...”属性):

<path fill="none" stroke="steelblue" stroke-width="1.5"></path>

编辑:这是我在浏览器中看到的屏幕截图:

这是前几行数据:

percentile,y50
P0-10,16.10
P10-20,17.10
P20-30,18.50
P30-40,19.00
P40-50,19.20

Answer 1

d3.csv("./data/myFile.csv").then(data => {
      data.forEach(function(d) {
        d.y50 = +d.y50;
      });
        var xScale = d3.scalePoint()
            .domain(myDomain)
            .range([0, width])
            .padding(.5);
        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(xScale));

        var yScale = d3.scaleLinear()
            .domain([0, 100])
            .range([height, 0]);
        svg.append("g")
            .call(d3.axisLeft(yScale));

        let line = d3.line()
            .x(d => {
                console.log("THIS DOES NOT PRINT TO CONSOLE");
                return xScale(d.percentile);
            })
            .y(d => {return yScale(d.y50)});

        console.log('THIS PRINTS TO CONSOLE');

        svg.append("path")
            .datum(data)
            .attr("d", line)
            .attr("fill", "none")
            .attr("stroke", "steelblue")
            .attr("stroke-width", 1.5);

        console.log('THIS PRINTS TO CONSOLE');
    });

这应该可以解决您的问题。您原来的第二个 then 语句从未在第一个 then 语句中保留转换后的数据。