Пытаюсь написать приложение для построения графиков. Скопировал код из примера и все работало. Но для моих нужд код лучше написать из набора отдельных функций. Решил вынести переменные из функции чтобы они были public, но после выдает ошибку.
Вот мой код.
('.btn').click(function () {
var ind = $('tr:last').index();
$('.hide').clone().appendTo('table').addClass('row').removeClass('hide');
$('tr:last>td:nth-child(2)>input').addClass('x');
$('tr:last>td:nth-child(3)>input').addClass('y');
$('tr:last>td:first').text(ind);
});
var rawData = [];
var z = 0;
var height = 500,
width = 500,
margin=30,
data=[];
var numb;
function inputToMass() {
var inpx = $('.x');
var inpy = $('.y');
var x, y;
var massx = [];
var massy = [];
var mass = {};
var cur = 0;
for (i = 0; i < inpx.length; i++) {
mass = {};
x = inpx[i].value;
x = parseInt(x);
mass.x = x;
y = inpy[i].value;
y = parseInt(y);
mass.y = y;
rawData[i] = mass;
}
for (i = 0; inpx.length > i; i++) {
x = inpx[i].value;
x = parseInt(x);
massx[i] = x;
y = inpy[i].value;
y = parseInt(y);
massy[i] = y;
}
for (var i = 0; i < massx.length; i++) {
if (cur < massx[i]) {
cur = massx[i];
}
if (cur < massy[i]) {
cur = massy[i];
}
}
var ax = cur/100*7;
numb = cur + ax;
}
// создание объекта 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;
// функция интерполяции значений на ось Х
var scaleX = d3.scale.linear()
.domain([0, numb])
.range([0, xAxisLength]);
// функция интерполяции значений на ось Y
var scaleY = d3.scale.linear()
.domain([numb, 0])
.range([0, yAxisLength]);
// масштабирование реальных данных в данные для нашей координатной системы
// функция, создающая по массиву точек линии
var line = d3.svg.line()
.x(function(d){return d.x;})
.y(function(d){return d.y;});
// создаем ось X
var xAxis = d3.svg.axis()
.scale(scaleX)
.orient("bottom");
// создаем ось Y
var yAxis = d3.svg.axis()
.scale(scaleY)
.orient("left");
$('.btn2').click(function () {
$('svg').remove();
inputToMass();
for(i=0; i<rawData.length; i++)
data.push({x: scaleX(rawData[i].x)+margin, y: scaleY(rawData[i].y) + margin});
// отрисовка оси Х
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);
// добавляем путь
svg.append("g").append("path")
.attr("d", line(data))
.style("stroke", "steelblue")
.style("stroke-width", 2);
});
Вот ошибка которую выдает.
d3.v3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,NaNZ".
Помогите разобраться. PS очень мало работал с d3.
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости