Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.04.2017, 14:24
Новичок на форуме
Отправить личное сообщение для albatros Посмотреть профиль Найти все сообщения от albatros
 
Регистрация: 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>

Подскажите, куда копать? Если можно, то подробнее, для чайника.
Ответить с цитированием
  #2 (permalink)  
Старый 07.04.2017, 15:41
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 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;
Ответить с цитированием
  #3 (permalink)  
Старый 07.04.2017, 17:47
Новичок на форуме
Отправить личное сообщение для albatros Посмотреть профиль Найти все сообщения от albatros
 
Регистрация: 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>
Ответить с цитированием
  #4 (permalink)  
Старый 07.04.2017, 17:56
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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

Вот и все - при наличии такого функционала вы можете многократно менять любые координаты графика
Ответить с цитированием
  #5 (permalink)  
Старый 07.04.2017, 18:02
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Что означает ошибка "Отсутствует исполняющее ядро ДЛЯ расширения имени файла js" Mattias Общие вопросы Javascript 6 15.02.2021 13:16
Как сделать ссылку для скачивания html файла m-mikle Общие вопросы Javascript 26 19.01.2015 18:04
загрузка джаваскрипта file by file с номером ревизии(последней) в урле для файла sergdev Ваши сайты и скрипты 7 13.04.2010 10:52
Аналог wmode=transparent для Canvas или svg lusever Events/DOM/Window 1 15.06.2009 16:05
смайлы для чата, замена текста brain Общие вопросы Javascript 9 28.11.2008 21:35