Разрабатываю приложение с React и D3. К сожалению с последним знаком не так давно и очень туплю. При подключении D3 через npm компилятор постоянно ругается на синтаксис как я понял. Я использовал как основу для изучения D3 старый учебник на метанит. Прошу помогите разобраться и решить возникшую ошибку.
Код D3 (проблема именно в его синтаксисе)
var mainAxis = function () {
var cur = 0;
// создание объекта svg
var svg = d3.select("body").append("svg")
.attr("class", "axis")
.attr("width", width)
.attr("height", height);
// длина оси X= ширина контейнера svg - отступ слева и справа
var xAxisLength = width - 2 * margin;
// длина оси Y = высота контейнера svg - отступ сверху и снизу
var yAxisLength = height - 2 * margin;
for (var i = 0; i < rawData.length; i++) {
if (cur < rawData[i].x) {
cur = rawData[i].x
}
if (cur < rawData[i].y) {
cur = rawData[i].y
}
}
var sizePlus = cur/100*10;
numb = cur + sizePlus;
// функция интерполяции значений на ось Х
var scaleX = d3.scale.linear()
.domain([0, numb])
.range([0, xAxisLength]);
// функция интерполяции значений на ось Y
var scaleY = d3.scale.linear()
.domain([numb, 0])
.range([0, yAxisLength]);
// масштабирование реальных данных в данные для нашей координатной системы
for (i = 0; i < rawData.length; i++)
data.push({
x: scaleX(rawData[i].x) + margin,
y: scaleY(rawData[i].y) + margin
});
// создаем ось X
var xAxis = d3.svg.axis()
.scale(scaleX)
.orient("bottom");
// создаем ось Y
var yAxis = d3.svg.axis()
.scale(scaleY)
.orient("left");
// отрисовка оси Х
svg.append("g")
.attr("class", "x-axis")
.attr("transform", // сдвиг оси вниз и вправо
"translate(" + margin + "," + (height - margin) + ")")
.call(xAxis);
// отрисовка оси Y
svg.append("g")
.attr("class", "y-axis")
.attr("transform", // сдвиг оси вниз и вправо на margin
"translate(" + margin + "," + margin + ")")
.call(yAxis);
// создаем набор вертикальных линий для сетки
d3.selectAll("g.x-axis g.tick")
.append("line")
.classed("grid-line", true)
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", - (yAxisLength));
// рисуем горизонтальные линии координатной сетки
d3.selectAll("g.y-axis g.tick")
.append("line")
.classed("grid-line", true)
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", xAxisLength)
.attr("y2", 0);
}
Код ошибки что возникла
TypeError: __WEBPACK_IMPORTED_MODULE_2_d3__.d.axis is not a function