Группа точек чертежа d3.js

Question

У меня есть следующий массив с данными точек (в котором две группы точек):

const data = [[{x: 1, y: 3.4}, ...], [{x: 1, y: 4.3}, ...]]

Я хочу нарисовать точки для каждой группы точек так, чтобы точки каждой группы были вложены в<g> тег.Мой код выглядит так:

const $svg = d3.select('svg')
const $points = $svg.selectAll('.points').data(data)

$points.enter()
        .append('g')
        .attr('class', 'points')

const $point = $points.selectAll('.points').data(d => d)

$point.enter()
        .append('circle')
        .attr('class', 'point')
        .attr('cx', d => scale.x(d.x))
        .attr('cy', d => scale.y(d.y))
        .attr('r', 4)

Пример на JSFiddle

Но только <g> нарисован таким образом, а элементы <circle> - нет.Что я сделал не так?