D3JS V6：多线组

问题描述

我一直在尝试使用 D3JS V6 制作多线图。问题在于对数据进行分组（长格式）并尝试为每个组绘制路径。

我的数据遵循以下结构：

性爱	阿诺	D
男	2000	25
男	2001	58
女	2000	55
女	2001	75
总计	2000	80
总计	2001	133

    function dataviz2() {

    var dataset;
    h = 400
    w = 650
    padding = 40
    count = 0

    // Convertir Strings a Fechas
    var parseTime = d3.timeParse('%Y')

    // Convertir Fechas a Strings
    var parseDate = d3.timeFormat('%Y')

    var rowConverter = function (d) {
        return {
            Sexo: d.Sexo,Año: parseTime(d.Año),N: parseInt(d.N),}
    }

    d3.csv('data.csv',rowConverter).then(function (data) {
        dataset = data
        dataset.sort(function (x,y) {
            return d3.ascending(x.Año,y.Año)
        })
        dataBySex = d3.group(data,d => d.Sexo)
        dataBySexGr = Array.from(dataBySex,([sexo,value]) => ({ sexo,value }))
        console.log(dataBySex)
        console.log(dataBySexGr)



        chart()
    })

    function chart() {

        // Scale X
        xScale = d3.scaleTime()
            .domain([
                d3.min(dataset,function (d) { return d.Año }),d3.max(dataset,function (d) { return d.Año })
            ])
            .range([padding,w - padding])

        // Scale Y
        yScale = d3.scaleLinear()
            .domain([0,function (d) { return d.N })])
            .range([h - padding,padding])

        // Create Axis
        var xAxis = d3.axisBottom(xScale)
        var yAxis = d3.axisLeft(yScale)

        var svg = d3.select('#dataviz1')
            .append('svg')
            .attr('width',w)
            .attr('height',h)

        let id = 0;
        const ids = function () {
            return "line-" + id++
        }

        var lines = svg.selectAll('.line')
            .data(dataBySexGr)
            .join('path')
            .attr("class",ids)
            **.attr('d',d => {
                return d3.line()
                    .x(d => x(d.Año))
                    .y(d => y(d.N))
            })**
            .attr('stroke','blue')
            .attr('stroke-width',3)
            .attr('fill','none')

        svg.append('g')
            .attr('class','axis')
            .attr('transform','translate(0,' + (h - padding) + ')')
            .attr('visibility','visible')
            .call(xAxis)

        svg.append('g')
            .attr('class','translate(' + padding + ',0)')
            .attr('visibility','visible')
            .call(yAxis)
    }
}

经过多次尝试，我知道 .attr('d',d => ...) 是问题所在。该函数的参数表示“'d' 已声明，但它的值从未被读取”。当我检查 HTML 时，我收到了我正在寻找的 3 个不同的路径，但没有值，是一个函数。

我真的被困在这里，所以我很感激任何帮助。

谢谢！！

解决方法

d3.line 返回一个行生成器函数，您可以将该函数视为 d 属性。您需要传递数据并执行该函数以获取路径数据：

.attr('d',d => {
            return d3.line()
                .x(d => x(d.Año))
                .y(d => y(d.N))(d)
        })

或者，您可以事先定义行生成器并简单地使用 .attr('d',line):

const line = d3.line()
   .x(d => x(d.Año))
   .y(d => y(d.N))

selection.attr("d",line);