Код D3.js не работает для создания кругов на основе данных

Question

Я пытался нарисовать несколько кругов на основе данных, код не работает.написав этот код, посмотрев учебник, тот же код работает для инструктора.Я использую ту же версию D3, что и инструктор.также я не могу рисовать любые другие фигуры, пока код переменной окружности находится в файле.

var data = [19, 15, 25, 85, 69];

var canvas = d3.select("#chart-area").append("svg")
 .attr("width", 400)
 .attr("height", 400);

var circles = canvas.selectAll("circle")
 .data("data");

 circles.enter()
 .append("circle")
 .attr("cx", function (d, i) {
    return (i * 50) + 25;
    })
 .attr("cy", 100)
 .attr("r", function (d, i) {
    return d * 5;
    })
 .attr("fill", #000);

Answer 1

Прежде всего вы передаете данные в виде строки "data", а не фактического массива значений.

Чем вы делаете .attr("r", function (d, i) { return d * 5; }), который умножит каждое значение в массиве на 5, и этозаставит радиус каждого круга быть таким огромным, что он заполнит весь контейнер svg.

И, наконец, есть проблема со значением цвета, которое не передается как строка - .attr("fill", #000);

Вот рабочий JSFiddle демо .