Помогите разобраться с ошибкой D3

260
14 марта 2018, 05:17

Пытаюсь написать приложение для построения графиков. Скопировал код из примера и все работало. Но для моих нужд код лучше написать из набора отдельных функций. Решил вынести переменные из функции чтобы они были 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.

READ ALSO
Не видит изменения JS

Не видит изменения JS

Не могу понять что не так, на локалхосте все ок работает, заливаю на прод и открывается старый код JS, абсолютно не видит нового файлаИ в html ссылка...

235
Заголовок таблицы при прокрутке

Заголовок таблицы при прокрутке

Работаю с таблицейХочу чтобы строка с заголовками при прокрутке страницы спускался и пользователь при работе с таблицей всегда видел заголовки...

346
Пункты меню в Joomla

Пункты меню в Joomla

Пункты меню не реагируют на нажатие левого стика мышиНа нажатие колёсика мышки - переходит на страницу , на левый стик - нет

224
Картинка увеличивается и уменьшается

Картинка увеличивается и уменьшается

Как сделать так чтобы картинка не увеличивалась и не уменьшалась когда прибавляешь проценты в браузереЕсли увеличивать в браузере или уменьшать...

224