如何在多线图中添加d3符号

Question

我正在尝试在d3多线图中添加符号，但没有取得任何成功， 任何人都可以帮忙，我是d3的新手吗？

我可以使用转换（easeLinear）创建多线图，但是当我尝试在数据点上添加d3符号时，什么都没有。

数据采用2d数组格式。

data = [
    [0, 10, 20, 30, 50, 70],
    [20, 40, 50, 60, 80],
    [12, 34, 56, 78, 10],
    [0, 20, 50, 70, 90]
]


// where x and y are linear scale
this.chartGroup = this.svg
    .append("g")
    .attr("transform", "translate(" + this.paddingLeft + ", " + this.paddingTop + ")")
    .attr("width", this.innerWidth)
    .attr("class", "chartArea")
    .attr("height", this.innerHeight);

let z = d3.scaleOrdinal(d3.schemeCategory10);
let valueline = d3.line()
    .x(function(d, i) {
        return x(i);
    })
    .y(function(d) {
        return y(d);
    });
this.path = this.chartGroup.selectAll(".line")
    .data(data)
    .enter()
    .append("path")
    .attr("class", "line")
    .attr("id", function(d, i) {
        return "line" + i;
    })
    .attr("d", valueline)
    .style("stroke", function(d) {
        return z(d);
    });

this.path
    .exit()
    .remove();

this.path.each(function(d) {
        d.totalLength = this.getTotalLength();
    })
    .attr("stroke-dasharray", function(d) {
        return d.totalLength + " " + d.totalLength;
    })
    .attr("stroke-dashoffset", function(d) {
        return d.totalLength;
    })
    .transition()
    .duration(this.animationDuration)
    .ease(d3.easeLinear)
    .attr("stroke-dashoffset", 0);
// from here it is not working

let symbol = d3.symbol().type(d3.symbols[2]).size(80);

this.points = this.chartGroup
    .selectAll("point")
    .data(data)
    .enter().append("path")
    .attr("class", "point")
    .selectAll("point")
    .data(function(d) {
        return d;
    })
    .enter()
    .append("path")
    .attr("class", "point")
    .attr("d", symbol)
    .style("fill", "rgba(255, 148, 148, 1)")
    .on("mouseover", function(d, i) {
        d3.select(this).attr("d", symbol.size(150))
    })
    .on("mouseout", function(d, i) {
        d3.select(this).attr("d", symbol.size(80))
    })
    .attr("transform", function(d, i) {
        return "translate(" + x(i) + "," + y(d) + ")";
    });