web-dev-qa-db-fra.com

Comment dessiner une ligne droite dans d3.js (horizontalement et verticalement)

J'ai des doutes dans l'élaboration du concept de graphique linéaire. Quelqu'un peut-il expliquer ces coordonnées?

x1=5,x2=10,y1=10,y2=30 

Veuillez expliquer chaque attribut et ce qu’il représente. Aussi, donnez-moi s'il vous plaît une idée sur le fait de tracer une ligne droite verticalement et aussi horizontalement (comme un réticule).

Je suis totalement novice dans les graphiques de d3.js, alors aidez-moi s'il vous plaît. Toute aide serait appréciée.

javascriptd3.js
19
divakar

Une ligne est une simple ligne entre deux points et est décrite par quatre attributs obligatoires.

  • x1: la position x de la première extrémité de la ligne mesurée à partir de la gauche de l'écran
  • y1: la position y de la première extrémité de la lignea été mesurée à partir du haut de l'écran. 
  • x2: la position x de la seconde extrémité de la ligne mesurée à partir de la gauche de l'écran. 
  • y2: La position y de la deuxième extrémité de la ligne mesurée à partir du haut de l’écran.

Voici un exemple de la section de code requise pour tracer une ligne.

holder.append("line")          // attach a line
    .style("stroke", "black")  // colour the line
    .attr("x1", 100)     // x position of the first end of the line
    .attr("y1", 50)      // y position of the first end of the line
    .attr("x2", 300)     // x position of the second end of the line
    .attr("y2", 150);    // y position of the second end of the line

Cela produira une ligne comme suit;

enter image description here

La ligne s'étend du point 100,50 à 300,150 (x1, y1 à x2, y2).

Vous pouvez le voir dans plus de contexte ici .

Cela ne couvre pas l'exemple du réticule, mais une fois que vous avez compris la partie ci-dessus, il devrait être plus clair.

46
d3noob

Pour tracer une ligne, nous avons besoin de deux points, dans un graphique si nous voulons référencer un point que nous utilisons des coordonnées, (x1, y1) est le point de départ d'une ligne (x2, y2) est le point final d'une ligne, ces deux points sont connectés.

Pour tracer une grille dans un graphique, reportez-vous à ce lien http://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html Si vous ne comprenez pas, alors demandez.Ok

1
saikiran.vsk