¿Cómo se escribe una función que devuelve valores de una matriz?

He creado esta matriz:

var lineData = [ { "x": 25, "y": 75}, { "x": 85, "y": 130}, { "x": 140, "y": 190}, { "x": 195, "y": 245}, { "x": 195, "y": 300}, { "x": 25, "y": 350}, { "x": 80, "y": 405}, { "x": 195, "y": 460}]; 

Ahora quiero dibujar puntos suspensivos en las coordenadas de la matriz. ¿Cómo creo una función que acceda a los valores x e y? ¿Cómo funcionan las funciones?

 // Draw ellipses var circle = svgContainer.append("ellipse") .attr("cx", function(d) { return dx; }}) .attr("cy", function(d) { return dy; }) .attr("rx", 5) .attr("ry", 5); 

Usar un bucle para acceder a los datos (como en la respuesta aceptada ) en un código D3 es una idea terrible : no solo esto es completamente innecesario, sino que va en contra del concepto mismo de unirse a los datos D3, y hará que las cosas sean incómodas más adelante. (Si intentas manipular / cambiar esa selección). Si solucionas esto con un bucle, ¿por qué usas D3 en primer lugar? La solución que aceptaste es completamente no idiomática .

No necesitas un bucle. Simplemente vincule los datos y utilice una selección “ingresar”, accediendo al dato de cada círculo con el primer parámetro de la función anónima: esa es la function(d) famosa function(d) en D3. Cuando haces esto …

 .attr("cx", function(d){ return dx}) //first parameter ---^ 

… el dato de cada elemento se pasará a la función attr . En caso de que quiera saber, el segundo parámetro es el índice y el tercer parámetro es el grupo actual. Además, el nombre real del parámetro no importa, solo su orden.

Aquí hay un ejemplo usando sus datos:

 var svg = d3.select("body") .append("svg") .attr("width", 600) .attr("height", 500); var lineData = [ { "x": 25, "y": 75}, { "x": 85, "y": 130}, { "x": 140, "y": 190}, { "x": 195, "y": 245}, { "x": 195, "y": 300}, { "x": 25, "y": 350}, { "x": 80, "y": 405}, { "x": 195, "y": 460}]; var ellipses = svg.selectAll("faraday") .data(lineData) .enter() .append("ellipse") .attr("cx", function(d){ return dx}) .attr("cy", function(d){ return dy}) .attr("rx", 5) .attr("ry", 5) .attr("fill", "teal"); 
  

Puede usar el método forEach para recorrer cada elemento de una matriz y obtener los valores de cada uno.

 lineData.forEach(function(d) { // Draw an elipse }); 

Coloque su código dentro de los corchetes, use dx y dy para acceder a las coordenadas en cada elemento de la matriz.