大家好，
我想請問一下，當有兩組資料( d1 跟 d2 )時，
我這樣綁定

let getData = [
    {d1:0,d2:0,xAxis:0},
    {d1:10,d2:5,xAxis:1},
    {d1:25,d2:15,xAxis:2}
]

let myMap = new Map()
myMap.set('d1', getData)
myMap.set('d2', getData)

在畫 line 跟畫 area 時，沒有問題，如下
(怕版面太多，所以有刪了一些跟style有關的code，例如 .attr('fill','#fff') )

let line = svg.append('g')
    .attr("clip-path", "url(#clip)")
line.selectAll('.area')
    .data(myMap)
    .join('path')
    .attr('d', (d, i) => {
        let key = d[0]
        return d3.area()
            .defined((d, i) => d[key] || i == 0)
            .x(d => scaleX(d['xAxis']) )
            .y0( scaleY(0) )
            .y1(d => scaleY(d[key]) )
            (d[1])
    })
line.selectAll('.line')
    .data(myMap)
    .join('path')
    .attr('d', (d, i) => {
        let key = d[0]
        return d3.line()
            .defined((d, i) => d[key] || i == 0)
            .x(d => scaleX(d['xAxis']) )
            .y(d => scaleY(d[key]) )
            (d[1])
    })

但在畫點的時候，cx 跟 cy 那邊就出錯了

line.selectAll('.point')
    .data(myMap)
    .join('circle')
    .attr("cx", (d, i) => {
        // i是 new Map的 i，只會有 0 跟 1
        //最後return的會是陣列，所以出錯
        let key = d[0]
        return d[1].map((e,i)=>{
            if(e[key] || i == 0) return scaleX(e['xAxis'])
        }).filter(e=>e) //篩掉 y value == undefined 的值
    })
    .attr("cy", (d, i) =>{
        // i是 new Map的 i，只會有 0 跟 1
        //最後return的會是陣列，所以出錯
        let key = d[0]
        return d[1].map(e=>{
            if(e[key] || i == 0) return scaleY(e[key])
        }).filter(e=>e) //篩掉 y value == undefined 的值
    })
    .attr("r", 3)

目前想不到該怎麼處理 circle，請問該怎麼做呢?

-----已解決--------
只能重新整理資料，再帶入

myMap.forEach((value, key) => {
    let dataArray = value.map((e, i) => {
        if (e[key] || i == 0) {
            let obj = {
                data: e[key],
                xAxis: e['xAxis']
            }
            return obj
        }
    }).filter(e => e) //filter是確保，數值不是undefined
    
    line.selectAll('.point')
        .data(dataArray)
        .join('circle')
        .attr("fill", 'none')
        .attr("stroke", 'blue')
        .attr("stroke-width", 2)
        .attr("cx", (d, i) => scaleX(d['xAxis'])
        .attr("cy", (d, i) => scaleY(d['data']))
        .attr("r", 3)
});