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

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

2 个答案: