d3.js - pagex - d3 tooltip v4

D3.js, posiciona los elementos horizontalmente

Question

Soy un novato de D3.js, así que le pido disculpas si le pregunto algo demasiado básico.

Tengo una matriz simple como un conjunto de datos:

[0, 10, 15, 20, 24, 35, 58]

Para cada elemento de mi matriz, quiero crear un círculo y colocar horizontalmente esos círculos a la misma distancia (12 píxeles) comenzando desde x = 10 (y y siendo constantemente 50). ¿Como lo puedo hacer?

Gracias por adelantado.

Answer 1

Las cosas básicas que necesitas saber sobre d3.js es que vincula datos a elementos svg y crea visualización.

Para llegar a lo básico de d3. Puedes buscar en Google.

Aquí hay algunos sitios que prefiero para aprender d3.

d3 - Por supuesto, el sitio web oficial. Con todos los códigos y ejemplos.

Dashing D3 : gratis para básico y también puede obtener una extensión paga para otros tutoriales de d3.

d3noob : obtienes un PDF gratuito con todo el informe de línea por línea en el PDF. El que más prefiero para los principiantes.

Aquí está la respuesta para la pregunta: violín .

Es muy simple crear círculos en d3.

Aquí está el código que he usado.

var svg = d3.select(''.circle'')
        .append(''svg'')
        .attr(''height'', 500)
        .attr(''width'', 500)

Primero, .circle el elemento svg al .circle div.

svg.selectAll(''circle'') .data(data) .enter() .append(''circle'') .attr("cx", function(d, i) { return 60 * i }) .attr("cy", 60) .attr("r", 20)

Y luego agrego los círculos dependiendo de la cantidad de datos que usan el bloque de código anterior.

Nota: .attr es que estoy agregando atributo.

Aquí he arreglado el radio a 20 .

Pero puedes cambiar el radio de acuerdo con los datos como este. function(d) { return d; } function(d) { return d; } .

Y, por supuesto, puedes colorear los círculos usando .style("fill", "#ddd") y otros elementos css utilizando .style() .

Puede obtener más de esta información de los sitios web que he proporcionado.

Espero que esto ayude.