Форум

albatros · #1 (**permalink**) 07.04.2017, 14:24

Добрый день. Два дня курил форум и учебник, но так и не смог понять как можно поменять данные в массиве для построения графика. Мысль такая, в инпут текст вводятся координаты x и y для каждой точки и соответственно изменяется график.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"> </script>
<style>
svg path{
    stroke: steelblue;
    fill: none;
    stroke-width: 2;
}
</style>
<body>
 
<script type="text/javascript">
var width = 400,
    height = 400;
// массив точек для создания пути


var data = [ 
    {x: 80, y: 50},{x: 110, y: 80},{x: 140, y: 90},
    {x: 170, y: 70},{x: 200, y: 60},{x: 230, y: 60},
    {x: 260, y: 70},{x: 290, y: 80},{x: 320, y: 70}
];

// функция, создающая по массиву точек линии
var line = d3.svg.line()
            .x(function(d){return d.x;})
            .y(function(d){return d.y;}); 
             
var svg = d3.select("body").append("svg");
 
svg.attr("height", height)
    .attr("width", width); 
     
// добавляем путь
svg.append("path").attr("d", line(data));
 
</script>
<div>
<input type="text" id="in0" value="" size="1">
 <input type="text" id="out0" value="" size="1">
 <input type="text" id="in1" value="" size="1">
 <input type="text" id="out1" value="" size="1">// И так далее...
 </div>
</body>
</html>

Подскажите, куда копать? Если можно, то подробнее, для чайника.

ksa · #2 (**permalink**) 07.04.2017, 15:41

Сообщение от albatros

как можно поменять данные в массиве

Это не сложно...

var data = [ 
    {x: 80, y: 50},
    {x: 110, y: 80},
    {x: 140, y: 90},
    {x: 170, y: 70},
    {x: 200, y: 60},
    {x: 230, y: 60},
    {x: 260, y: 70},
    {x: 290, y: 80},
    {x: 320, y: 70}
];
data[3].x=10;
data[3].y=20;

albatros · #3 (**permalink**) 07.04.2017, 17:47

Спасибо, но проблема подстановки значения из инпута все равно осталась, как пытаюсь подставить переменную, график пропадает.

<script type="text/javascript">
 function sss() {
var in0 = document.getElementById("in0").value;
var in01 = Number(in0);
}
var width = 400,
    height = 400;
// массив точек для создания пути
var data = [ 
    {x: 80, y: 50},{x: 110, y: 80},{x: 140, y: 90},
    {x: 170, y: 70},{x: 200, y: 60},{x: 230, y: 60},
    {x: 260, y: 70},{x: 290, y: 80},{x: 320, y: 70}
];
data[3].x=in01;
data[3].y=95;
// функция, создающая по массиву точек линии
var line = d3.svg.line()
            .x(function(d){return d.x;})
            .y(function(d){return d.y;}); 
             
var svg = d3.select("body").append("svg");
 
svg.attr("height", height)
    .attr("width", width); 
     
// добавляем путь
svg.append("path").attr("d", line(data));

</script>
<div>
<input type="text" id="in0" value="" size="1" onchange="sss()">
 <input type="text" id="out0" value="" size="1" onchange="sss()">
 <input type="text" id="in1" value="" size="1" onchange="sss()">
 <input type="text" id="out1" value="" size="1" onchange="sss()">
 </div>
</body>
</html>

Dilettante_Pro · #4 (**permalink**) 07.04.2017, 17:56

albatros,
Если вы хотите сделать интерфейс для изменения координат, то нужно примерно следующее:
Инпуты (строки 42-45) рисовать не надо
Нарисовать две кнопки:
"Редактировать координаты графика"
"Перерисовать график". Эту кнопку пока спрятать.
К первой кнопке привесить функцию, в которой: {спрятать первую кнопку, проверять наличие html-таблицы с координатами графика. Если нет - по количеству точек сгенерировать таблицу со столбцами "Номер","X","Y", в ячейках "X","Y" разместить инпуты, заполнить ячейки данными из data, показать таблицу, показать вторую кнопку}.
Ко второй кнопке привязать функцию, в которой:{спрятать вторую кнопку, переписать данные из таблицы в data, спрятать таблицу, перерисовать график, показать первую кнопку}

Вот и все - при наличии такого функционала вы можете многократно менять любые координаты графика

Dilettante_Pro · #5 (**permalink**) 07.04.2017, 18:02

albatros,

Сообщение от albatros

как пытаюсь подставить переменную, график пропадает.

data[3].x=in01; - это у вас исполняется сразу же при запуске программы, а на этот момент переменная in01 у вас не определена и не получила никакого значения (впрочем, она в этом операторе никогда не будет определена, т.к. ее определение находится внутри функции sss)

Форум

Справочник

Discord чат

Курсы javascript