07.04.2017, 14:24
|
Новичок на форуме
|
|
Регистрация: 07.04.2017
Сообщений: 2
|
|
Замена в массиве координат для SVG файла
Добрый день. Два дня курил форум и учебник, но так и не смог понять как можно поменять данные в массиве для построения графика. Мысль такая, в инпут текст вводятся координаты 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>
Подскажите, куда копать? Если можно, то подробнее, для чайника.
|
|
07.04.2017, 15:41
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
Сообщение от 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;
|
|
07.04.2017, 17:47
|
Новичок на форуме
|
|
Регистрация: 07.04.2017
Сообщений: 2
|
|
Спасибо, но проблема подстановки значения из инпута все равно осталась, как пытаюсь подставить переменную, график пропадает.
<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>
|
|
07.04.2017, 17:56
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
albatros,
Если вы хотите сделать интерфейс для изменения координат, то нужно примерно следующее:
Инпуты (строки 42-45) рисовать не надо
Нарисовать две кнопки:
"Редактировать координаты графика"
"Перерисовать график". Эту кнопку пока спрятать.
К первой кнопке привесить функцию, в которой: {спрятать первую кнопку, проверять наличие html-таблицы с координатами графика. Если нет - по количеству точек сгенерировать таблицу со столбцами "Номер","X","Y", в ячейках "X","Y" разместить инпуты, заполнить ячейки данными из data, показать таблицу, показать вторую кнопку}.
Ко второй кнопке привязать функцию, в которой:{спрятать вторую кнопку, переписать данные из таблицы в data, спрятать таблицу, перерисовать график, показать первую кнопку}
Вот и все - при наличии такого функционала вы можете многократно менять любые координаты графика
|
|
07.04.2017, 18:02
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
albatros,
Сообщение от albatros
|
как пытаюсь подставить переменную, график пропадает.
|
data[3].x=in01; - это у вас исполняется сразу же при запуске программы, а на этот момент переменная in01 у вас не определена и не получила никакого значения (впрочем, она в этом операторе никогда не будет определена, т.к. ее определение находится внутри функции sss)
|
|
|
|