R�p�tition de fonction

**missty95** · 26/03/2020, 18h40

Bonjour � tous,

Je d�bute en JS, je voudrais faire une page html qui permet de tracer des courbes math�matiques.

Jusque l� pas de probl�me on trouve plein de chose.

Ce que souhaites c'est rajouter un autre bouton qui permet de rajouter une input pour qu'un utilisateur puisse choisir une autre fonction � tracer.

Exemple : Si l'utilisateur clique une premi�re fois sur le bouton, alors il peut tracer une deuxi�me fonction. Si l'utilisateur clique une deuxi�me fois sur le bouton, alors l'utilisateur peut tracer une troisi�me fonction... etc.

Je pense qu'il faut impl�menter ma fonction plot mais je ne sais pas comment faire.

Pouvez vous m'aider?

Merci

Mon HTML

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
 
<html lang="en">
 
<head>
	<meta charset="utf-8" />
	<title>7_interactive_plotter</title>
 
	<link rel="stylesheet" href="7_interactive_plotter.css">
 
	<script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://mauriciopoppe.github.io/function-plot/js/function-plot.js"></script>
 
	<script src="7_interactive_plotter.js"></script>
 
</head>
 
<body onload="plot();">
  <h1>Traceur interactif</h1>
 
 
<div class="layer">
 
<section id="plotSettings">
 
	<p> <b> Configuration des axes </b> </p>
	<p></p>
 
    <label for="xMin"> Valeur Mini de X: </label> <input type=number id="xMin" value=-5 step=0.5 oninput="plot();">
    <p></p>
 
    <label for="xMax">Valeur Maxi de X: </label> <input type=number id="xMax" value=5 step=0.5 oninput="plot();">
    <p></p>
 
    <label for="yMin">Valeur Mini de Y:  </label> <input type=number id="yMin" value=-5 step=0.5 oninput="plot();">
    <p></p>
 
    <label for="yMax">Valeur Maxi de Y: </label> <input type=number id="yMax" value=5 step=0.5 oninput="plot();">
    <p></p>
 
    <label for="color">Couleur de la fonction à dessiner: </label> <input type=color id="color" value=#bb0b0b onchange="plot();">
    <p></p>
 
    <label for="function">Fonction à dessiner: </label> <input id="function" type="text" value="sin(x)" onchange="plot();">
    <p></p>
 
	<button onclick="plot();">Dessiner</button>
 
</section>
 
<section id="plot">
    <div id="myFunction"></div>
 
</section>
</div>
 
<footer>
 
<a href="7_support.html">Retour au rapport du workspace 7</a>
 
</footer>
 
</body>
 
</html>

Mon JS

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// fonction à tracer
 
var parameters = {
  target: '#myFunction',
  data: [{
    fn: 'sin(x)', 
    color: 'red'
  }],
  grid: true,
  yAxis: {domain: [-1, 1]},
  xAxis: {domain: [0, 2*Math.PI]}
};
 
function plot() {
  var f = document.querySelector("#function").value;
  var xMin = document.querySelector("#xMin").value;
  var xMax = document.querySelector("#xMax").value;
  var yMin = document.querySelector("#yMin").value;
  var yMax = document.querySelector("#yMax").value;
  var color = document.querySelector("#color").value;
 
  parameters.data[0].fn = f;
  parameters.xAxis.domain = [xMin, xMax];
  parameters.yAxis.domain = [yMin, yMax];
  parameters.data[0].color = color;
 
  functionPlot(parameters);
}

et le CSS

Code css :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
h1{
  	text-align: center;
	color: sienna;
	text-shadow: -2px 2px 2px black;
}
.layer{
  width: 70%;
  margin-right: auto;
  margin-left: auto;
}
 
section {
  border:4px solid grey;
  border-radius:15px;
  box-shadow: 5px 5px 5px grey;
  float:left;
  height:400px;
  padding: 20px;
  margin:10px;
}
 
#plotSettings {
  width:160px;
}
 
#plot {
  width:550px;
}

**Beginner.** · 26/03/2020, 18h56

Salut,

Envoy� par missty95

Jusque l� pas de probl�me on trouve plein de chose.

Ah ben justement j'ai ouvert ce fil : Tracer des courbes...

Ce que souhaites c'est rajouter un autre bouton qui permet de rajouter une input pour qu'un utilisateur puisse choisir une autre fonction � tracer.

Oui j'ai d�j� vu �a mais avant est-ce que tu es s�r que ton code actuel fonctionne bien ?

J'ai test� (c'est joli) ici : https://jsbin.com/zekayonaba/edit?output mais �a n'a pas l'air de fonctionner correctement quand je met la fonction sin(x)/x ?

**missty95** · 26/03/2020, 19h00

Salut, je ne sais pas quelle fonction tu veux faire mais tu peux essayer (sin(x))/x

**Beginner.** · 26/03/2020, 21h11

Non plus mais bon je vais regarder le code source...

Envoy� par missty95

Ce que souhaites c'est rajouter un autre bouton qui permet de rajouter une input pour qu'un utilisateur puisse choisir une autre fonction � tracer.

Exemple : Si l'utilisateur clique une premi�re fois sur le bouton, alors il peut tracer une deuxi�me fonction. Si l'utilisateur clique une deuxi�me fois sur le bouton, alors l'utilisateur peut tracer une troisi�me fonction... etc.

Tu veux dire si il clique sur le bouton "dessiner" tu veux qu'apparaisse un autre input ?

Cela me semble �trange, ne serait-il pas mieux d'ajouter un bouton "ajouter" pour ajouter un input ?

Et ensuite tu veux que toutes les courbes soient affich�es si il clique sur le bouton "dessiner" ?

**missty95** · 27/03/2020, 10h23

Je me suis mal expliquer effectivement,

Je souhaite un bouton suppl�mentaire "rajouter fonction � dessiner"

Un input apparait "la fonction � rajouter" et un bouton pour valider.

Les courbes suppl�mentaire sont trac�e dans le m�me graphique.

Je pense que c'est se que tu proposais.

**Beginner.** · 27/03/2020, 17h08

Oui je pensais � peu pr�s � �a sauf pour le "bouton pour valider", je me disais qu'on avait d�j� le bouton "Dessiner"...

Sinon je me suis rendu compte d'une autre chose : la couleur, l� il n'y a qu'une input (type color) mais comment tu comptes faire si il y a plusieurs courbes ?

**missty95** · 27/03/2020, 17h12

J'y ai pens� soit :
- je met une couleur al�atoire aux autre courbes
- soit je rajoute un input couleur pour les courbes suivantes

**Beginner.** · 27/03/2020, 20h48

Salut,

J'ai fait ce code teste : https://jsbin.com/nilonefite/edit?output

A toi de voir pour la pr�sentation HTML/CSS car c'est juste un exemple pour le JS...

Les couleurs sont dans un tableau de 4 couleurs apr�s la quatri�me couleurs on revient � la premi�re...
L� j'ai gard� le premier input type color mais ce serait plus logique de l'enlever ou d'en ajouter un pour chaque courbe...

R�p�tition de fonction

JavaScript

Vue hybride

Discussions similaires

Partager

Partager