D3JS V6：多线组答案

【问题标题】：D3JS V6: Multi Line GroupD3JS V6：多线组
【发布时间】：2021-06-02 00:36:30
【问题描述】：

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

我的数据遵循以下结构：

Sexo	Año	D
Male	2000	25
Male	2001	58
Female	2000	55
Female	2001	75
Total	2000	80
Total	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, d3.max(dataset, 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', 'axis')
            .attr('transform', 'translate(' + padding + ',0)')
            .attr('visibility', 'visible')
            .call(yAxis)
    }
}

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

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

谢谢！！

【问题讨论】：

标签： javascript d3.js linechart

【解决方案1】：

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

【讨论】：