D3 v5：中的“ d”属性 <path> 标签未填充值

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语句中保留转换后的数据。

Answer 2

为了解释在注释中找到的问题，以供将来参考：

而不是将所有返回的行转换为期望的数据格式，第一个.then仅返回具有以下内容的单个对象：

{ 
    percentile: undefined, 
    y50: NaN
} 

这里需要发生的是循环或映射原始数据，并为每一行返回转换后的对象，即

.then(data => {
    return data.map(d => {
        return { percentile: d.percentile, y50: +d.y50 }
    }
));