javascript - trazar - Cómo dibujar una línea recta en d3.js(horizontal y verticalmente)

hacer linea recta con pincel en photoshop

Question

Tengo dudas al dibujar el concepto de gráfico lineal. ¿Alguien puede explicar estas coordenadas?

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

Por favor explique cada atributo y lo que representa. Además, por favor, dame una idea sobre dibujar una línea recta verticalmente y también horizontalmente (como una cruz).

Soy totalmente novato en los gráficos d3.js, así que por favor ayúdenme. Cualquier ayuda sería apreciada.

Answer 1

Para dibujar una línea necesitamos DOS puntos, en un gráfico si queremos referir cualquier punto usamos coordenadas, (x1, y1) es el punto de inicio de una línea (x2, y2) es el punto final de una línea, estos dos puntos están conectados.

Para dibujar una grilla en el gráfico, consulte este enlace http://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html. Si no está entendiendo, pregunte: Ok.

Answer 2

Una línea es una línea simple entre dos puntos y está descrita por cuatro atributos requeridos.

• x1: la posición x del primer extremo de la línea medida desde la izquierda de la pantalla.
• y1: la posición y del primer extremo de la línea, medida desde la parte superior de la pantalla.
• x2: la posición x del segundo extremo de la línea medida desde la izquierda de la pantalla.
• y2: la posición y del segundo extremo de la línea, medida desde la parte superior de la pantalla.

El siguiente es un ejemplo de la sección de código requerida para dibujar una línea;

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

Esto producirá una línea de la siguiente manera;

La línea se extiende desde el punto 100,50 a 300,150 (x1, y1 a x2, y2).

Puedes verlo en más contexto aquí .

Esto no cubre el ejemplo de cruz de pelo, pero una vez que comprenda la parte anterior, debería ser más claro.