LINUX.ORG.RU
Форум — Web-development  

Как построить график функции кусочно-заданного вида?

 , ,


0

1

Нужно нарисовать квантовую яму для этого нужно нарисовать вертикальную черту , даже две вот так примерно |_| Вот код рисующий вертикальную черту да и вообще любую функцию 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
 </head>
 <body>
<div id="quadratic">

</div>
<input type = "text" name = "A" id="input-id" value="x=1" placeholder = "Введите а"><br> <!-- определяем элемент управления для текстовой информации -->
<button onclick="f()">Вычислить</button>
 </body>
  <!-- <script src="d3.min.js"></script>
   <script src="function-plot.js"></script>
-->
  <script src="https://unpkg.com/d3@3/d3.min.js"></script>
      <script src="https://unpkg.com/function-plot@1/dist/function-plot.js"></script>
  <script type="application/javascript">
  function f(){
  functionPlot({
  target: '#quadratic',
  
  data: [
    { fn: document.getElementById("input-id").value }
  ]
})
}
</script>
</html>
но он рисует не x=1 , а y=1,тут доки по ссылке https://mauriciopoppe.github.io/function-plot/



Последнее исправление: Gremlin_ (всего исправлений: 4)

Вроде подойдет раздел Multiple graphs, но не получается нарисовать вертикальную черту

Gremlin_
() автор топика
Ответ на: комментарий от Gremlin_

Решил через точки, но в дальнейшем программка будет не масштабированной 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
 </head>
 <body>
<!-- <div id="quadratic"> -->
<div id="polyline">
</div>
<input type = "text" name = "A" id="input-id" value="1" placeholder = "Введите а"><br> <!-- определяем элемент управления для текстовой информации -->
<button onclick="f()">Вычислить</button>
 </body>

  <!-- <script src="d3.min.js"></script>
   <script src="function-plot.js"></script>
-->
  <script src="https://unpkg.com/d3@3/d3.min.js"></script>
      <script src="https://unpkg.com/function-plot@1/dist/function-plot.js"></script>
  <script type="application/javascript">
  function f(){
  functionPlot({
  target: <!-- '#quadratic'-->
  '#polyline'
  ,
  
  data: [
    { 
  <!-- fn: document.getElementById("input-id").value -->
  points:[
  [document.getElementById("input-id").value,-3],
  [document.getElementById("input-id").value,-2],
  [document.getElementById("input-id").value,-1],
  [document.getElementById("input-id").value,0],
  [document.getElementById("input-id").value,1],
  [document.getElementById("input-id").value,2],
  [document.getElementById("input-id").value,3],
  ],
  fnType: 'points',
  graphType: 'polyline'
  }
  ]
})
}
</script>
</html>

Gremlin_
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development