LINUX.ORG.RU

Знаю где менять код но не знаю на что?

 , , ,


0

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

</div>
<input type = "text" name = "A" placeholder = "Введите а"><br> <!-- определяем элемент управления для текстовой информации -->
<button>Кнопка с текстом</button>
 </body>

   <script src="d3.min.js"></script>
  <script src="function-plot.js"></script>
  <script type="application/javascript">
  
	functionPlot({
  target: '#quadratic',
  
  data: [
    { fn: 'x^2' }
  ]
})
</script>
</html>

Хочу сделать чтобы я ввел значение функции в input name,button'ом дал задачу перерисовать, но это позже, сейчас же не рисует пример вот отсюда первый https://mauriciopoppe.github.io/function-plot/ то бишь икс в квадрате. По-мойму надо div id=«grid» поменять на что - то другое

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

Тогда нужно например ввести в поле А например 1 и отрисовать с помощью кнопки? то есть функцию y=1. Как загнать значение

this.A.value
в поле data с преобразованием в строку чтоли? ну ту что с апострафами
data: [
    { fn: '1' }
  ]

Gremlin_ ()
Ответ на: комментарий от Gremlin_
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
 </head>
 <body>
<div id="quadratic">

</div>
<input type = "text" name = "A" id="input-id" value="2" placeholder = "Введите а"><br> <!-- определяем элемент управления для текстовой информации -->
<button>Кнопка с текстом</button>
 </body>
   <script src="d3.min.js"></script>
  <script src="function-plot.js"></script>
  <script type="application/javascript">
  
  functionPlot({
  target: '#quadratic',
  
  data: [
    { fn: document.getElementById("input-id").value }
  ]
})
var message = document.getElementById("input-id").value;
  console.log(message)
</script>
</html>

Решил отчасти этим но нужно чтобы при нажатии на кнопку перерисовывалось

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

Давайте признаем что разрабы этих библиотек делают хуту не пригодную для серьезных разработок,а не функцию зависимую от одной переменной, тут даже вертикальную прямую не нарисовать x=1

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

мне насоветовали раньше тут и на тостере взять этот д3.жс а он не пригоден для ввода данных из текстбоксов и прочих кнопок

Может быть потому что d3.js предназначен для рисования графиков, а не ввода данных?

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

мне насоветовали раньше тут и на тостере

Так может претензии надо кидать тем, кто советовал? И потом. Это опенсорц. Возьми и сделай, чтобы был пригоден. И, я думаю, это можно сделать легко без того, чтобы лезть в код.

crutch_master ★★★★★ ()
Последнее исправление: crutch_master (всего исправлений: 1)
Ответ на: комментарий от crutch_master

Добавил функцию плот (functionPlot) в обычную функцию и заработало

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <!--
  <script type="application/javascript">
	function f1(t)
	{
		return 1-t;
	}
	function f2(t)
	{
		return t;
	}
	function f3(t)
	{
		return (-1/6)*t*(t-1)*(t-2);
	}
	function f4(t)
	{
		return (1/6)*t*(t-1)*(t+1);
	}
	function f(x)
	{
		return x*Math.exp(-x);
	}
	var left=0,right=2;
	var x1=[],y1=[],a=[],b=[],c=[],d=[],u=[],v=[],y2=[],x=[];
	var N=10,h=(right-left)/N,i=-1;
	for(var x1=left;x1<=right;x1+=h)
		y1[++i] = -2*Math.exp(-x1)+Math.exp(-x1)*x1;
	a[1]=1;
	a[N]=1;
	b[1]=0;
	b[N]=0;
	c[1]=0;
	c[N]=0;
	d[1]=y1[0];
	d[N]=y1[y1.length-1];
	i=-1;
	for(var x1=left;x1<=right;x1+=h)
		y1[++i] = f(x1);
	alert(y1);	
	for(var i=2;i<N;i++)
	{
		a[i]=4;
		b[i]=1;
		c[i]=1;
		d[i]=6*(y1[i-1]-2*y1[i]+y1[i+1])/h;
	}
	u[1] = d[1]/a[1];
	v[1]=-b[1]/a[1];		
   	
	for(i=2;i<N;i++)
	{
		u[i]=(d[i]-c[i]*u[i-1])/(c[i]-v[i-1]+a[i]);
		v[i]=-b[i]/(c[i]*v[i-1]+a[i]);	
	}

	for(i=0;i<=N;i++)
		x[i] = i*h+left;
	alert(x);

	v[N]=0;
	u[N]=-1;
	y2[N]=d[N];
	for(i=N-1;i>-1;i--)
	{
		y2[i]=v[i]*y2[i+1]+u[i];
	}
	var s=[];
	var count=-1;
	for(var i=0;i<N;i++)
	{
		s[i] = 0;
		for(var xx=x[i];xx<=x[i+1];xx+=0.01)
		{
			t = (xx-x[i])/h;
			s[++count] = y1[i]*f1(t)+y1[i+1]*f2(t)+y2[i]*h*f3(t)+y2[i+1]*h*f4(t);
		}
	}

	alert(s);
	function draw() {
      		var canvas = document.getElementById('canvas');
	      	if (canvas.getContext) {
        		var ctx = canvas.getContext('2d');

    			ctx.beginPath();
    			ctx.moveTo(0, y1[0]);
	    		for(i=1;i<y1.length;i++)
				ctx.lineTo(100*i,100*Math.abs(y1[i]));
    			//ctx.closePath();
			ctx.strokeStyle = '#ff0000';
	    		ctx.stroke();

    			ctx.beginPath();
    			ctx.moveTo(0, s[0]);
	    		for(i=1;i<=s.length;i++)
				ctx.lineTo(5*i,100*Math.abs(s[i]));

			ctx.strokeStyle = '#00ff00';
	    		ctx.stroke();
      	}
   }
  </script>
  -->

 </head>
 <body>
<div id="quadratic">

</div>
<input type = "text" name = "A" id="input-id" value="x" placeholder = "Введите а"><br> <!-- определяем элемент управления для текстовой информации -->
<button onclick="f()">Кнопка с текстом</button>
 </body>
 <!--
 <body onload="draw();">
   <canvas id="canvas" width="1000" height="400" border="black"></canvas>
 </body>
 -->
   <script src="d3.min.js"></script>
  <script src="function-plot.js"></script>
  <script type="application/javascript">
  function f(){
  functionPlot({
  target: '#quadratic',
  
  data: [
    { fn: document.getElementById("input-id").value }
  ]
})
}
var message = document.getElementById("input-id").value;
  console.log(message)
</script>
</html>

Gremlin_ ()