无法获得散点图进行渲染

Question

我在绘制散点图时遇到麻烦。这是一个入门代码，因此标签和轴尚未打开。我要一步一步走，只想看看渲染的圆圈，但是什么都没有出来。当我控制台日志时，没有错误。

对于这个特定的数据集，我试图根据人口规模在x轴上绘制收入，在y轴上绘制预期寿命，圆的面积。

有关数据集的信息。数据集很大并且有很多年，但是我现在只想渲染一年。

感谢您的帮助！

//margins
margin = {
  left: 200,
  right: 10,
  top: 20,
  bottom: 200
};
var width = 800 - margin.left - margin.right;
var height = 700 - margin.top - margin.bottom;

var svg = d3.select("#chart-area")
  .append("svg")
  .attr("height", height + margin.top + margin.bottom)
  .attr("width", width + margin.left + margin.right);

var g = d3.select("#chart-area")
  .append("svg")
  .attr("height", height + margin.top + margin.bottom)
  .attr("width", width + margin.left + margin.right)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



d3.json("data/data.json").then(function(data) {
  data.data;
  //cleaning the data of any null values
  const filteredData = data.map(function(year) {
    return year["countries"].filter(function(country) {
        var dataExists = (country.income && country.life_exp);
        return dataExists
      })

      .map(function(country) {
        country.income = +country.income;
        country.life_exp = +country.life_exp;
        return country;
      })
  });
  // plotting one year
  var formattedData = filteredData[0];

  var y = d3.scaleLinear()
    .domain([d3.min(formattedData, function(d) {
        return d.income;
      }),
      d3.max(formattedData, function(d) {
        return d.income;
      })
    ])
    .range([height, 0]);

  console.log(y);

  var area = d3.scaleLinear()
    .range([25 * Math.PI, 1500 * Math.PI])
    .domain([2000, 1400000000]);

  var x = d3.scaleLog()
    .domain([d3.min(formattedData, function(d) {
        return d.life_exp;
      }),
      d3.max(formattedData, function(d) {
        return d.life_exp;
      })
    ])
    .range([0, height])
    .base(10);

  console.log(formattedData);

  var circle = g.selectAll("circle")
    .data(formattedData);

  circle.enter()
    .append("circle")
    .attr("cx", function(i) {
      return x(i.income)
    })
    .attr("cy", function(i) {
      return y(i.life_exp)
    })
    .attr("r", function(d) {
      return Math.sqrt(area(d.population) / Math.PI)
    });

  console.log(circle);

});