Показать сообщение отдельно
  #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>

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