выбор точек для построения в d3 js

Question

Мне нужно отобразить точки на графике в зависимости от их года. Данные хранятся в виде:

{
       Xparam: {1800: …}
       Yparam: {1800: …}
}

Таким образом, исходя из данных за год, например 1800, 1801 и т. Д., Мне нужно получить значения х и у, я пытаюсь сделать это, как в коде, но результирующие точки одинаковы независимо от года и путаются в одну область:

результат

 svg.selectAll('circle').data(data).enter().append("circle")
 .attr("cx", function (d) { return +d[Xparam][year]; })
 .attr("cy", function (d) { return +d[Yparam][year]; })
 .attr("r", radius);

Как выбрать значения, чтобы для каждого года я рисовал только соответствующие точки?

Обновление: теперь я пытаюсь построить все точки следующим образом:

for (let i = 0; i < data.length; i++) { 
        svg.selectAll('circle').data(data).enter().append("circle")
            .attr("cx", +data[i][xParam][year]) 
            .attr("cy", +data[i][yParam][year]) 
            .attr("r", 3);

    }

но все равно работает, что точки остаются в неправильном месте

Answer 1

    let xRange = data.map(d=> +d[xParam][year]);
    x.domain([d3.min(xRange), d3.max(xRange)]);
    xAxis.call(d3.axisBottom(x));    

    let yRange = data.map(d=> +d[yParam][year]);
    y.domain([d3.min(yRange), d3.max(yRange)]);
    yAxis.call(d3.axisBottom(y));  

    let xLen = d3.max(xRange)-d3.min(xRange);
    let yLen = d3.max(yRange)-d3.min(yRange);

    var p = svg.selectAll('circle').data(data)
        .attr('cx', function(d) { return x(+d[xParam][year]); })
        .attr('cy', function(d) { return y(+d[yParam][year]); })
        .attr('r', 4 ); 

    p.enter().append("circle")
        .attr('cx', function(d) { return x(+d[xParam][year]); })
        .attr('cy', function(d) { return y(+d[yParam][year]); })
        .attr('r', 4);