d3 múltiples svg con 1 fila de datos cada uno

Estoy atascado con un problema d3.js: Estoy intentando dibujar varios lienzos SVG con una LÍNEA (es una forma personalizada más compleja, pero como ejemplo la línea es suficiente), donde la longitud (llamada "d.uni") de la línea está determinada por los datos. Entonces, cada fila de los datos se mapea a una línea dentro de su propio SVG.

Miré los ejemplos que están disponibles para SVG múltiples, como http://bl.ocks.org/mbostock/1305111 y http://bl.ocks.org/mbostock/3888852 y adapté la idea, que es principalmente, en la medida en que la obtengo, vincular los datos a la función de dibujo SVG.

Aquí está mi código:

     var w = 300;
     var h = 250;
     var stemL = 100;
     var length1 = 80;
     var angle1 = -1.2;

d3.csv("data_test.csv", function(data) {

//Create SVG element
var svg = d3.select("body")
       .selectAll("svg")
       .data(data)
       .enter()
       .append("svg")
       .attr("width", w)
       .attr("height", h)

// Cat 1         
svg.selectAll("uni")
   .data(data)
   .enter()
   .append("line")
   .attr("x1", w/2)
   .attr("y1", h - stemL)
   .attr("x2", function(d) {return w/2 + length1 * d.uni * Math.sin(angle1);})
   .attr("y2", function(d) {return (h - stemL) - length1 * d.uni * Math.cos(angle1); })
   .style("stroke", "steelblue")
   .style("stroke-width", 5);

});

Como resultado obtengo los 3 SVG esperados (vea data_test.csv a continuación), pero d3 dibuja cada línea de los datos en cada SVG uno encima del otro, en lugar de la línea 1 en SVG 1, la línea 2 en SVG 2, etc.

¿¿¿Qué me estoy perdiendo??? : - /

¡Muchas gracias por su ayuda con anticipación!

Ewa

data_test.csv:

country,uni
Sweden,1.6
Germany,1
Poland,0.7
0
Gracias por el enlace Lars! Así que tengo la impresión de que realmente necesito algo más que datos (datos) en la sección Cat 1/LINE. Intentó .data (función (d) {return d;}), ¡pero esto tampoco ayudó! : - /
agregado el autor Ewa, fuente
PD Se eliminó la parte con el "diseño circular" en mi pregunta, fue engañosa.
agregado el autor Ewa, fuente
Eche un vistazo al tutorial de selecciones anidadas , que creo que es lo que está buscando. aquí. Sin embargo, no estoy seguro de lo que quiere decir con diseño de pastel: no parece que esté usando el diseño circular.
agregado el autor Lars Kotthoff, fuente
Hmm, en realidad no tienes una estructura anidada allí; podría ser más fácil hacerlo con un bucle. Es decir, recorrer las filas y dibujar SVG/línea para cada una.
agregado el autor Lars Kotthoff, fuente

1 Respuestas

Tiene " .data (data) " dos veces. Uno en "Crear elemento SVG" y otro en "Cat 1" y esa parece ser la razón por la que d3 dibuja cada línea de los datos en cada SVG. " .data (data) " en "Crear elemento SVG" es suficiente.

Cuando "Cat 1" se cambia a este

svg.append("line")
.attr("x1", w/2)
.attr("y1", h - stemL)
.attr("x2", function(d) {return w/2 + length1 * d.uni * Math.sin(angle1);})
.attr("y2", function(d) {return (h - stemL) - length1 * d.uni * Math.cos(angle1); })
.style("stroke", "steelblue")
.style("stroke-width", 5);

Obtengo tres líneas diferentes.

[editar] También puedes escribir todo de esta manera:

var svg = d3.select("body")
        .selectAll("svg")
        .data(data)
        .enter()
        .append("svg")
        .attr("width", w)
        .attr("height", h)
        .append("line")
        .attr("x1", w/2)
        .attr("y1", h - stemL)
        .attr("x2", function(d) {return w/2 + length1 * d.uni * Math.sin(angle1);})
        .attr("y2", function(d) {return (h - stemL) - length1 * d.uni * Math.cos(angle1); })
        .style("stroke", "steelblue")
        .style("stroke-width", 5);
0
agregado
¡Gracias por tu respuesta! Cuando elimino .data (datos) en la sección Cat 1/LINE, no se dibuja nada. Tengo que vincular los datos como me refiero a ellos, pero de hecho creo que ahora tiene que ser algo más que datos (datos). Intentó .data (función (d) {return d;}) sin éxito.
agregado el autor Ewa, fuente
¡¡¡¡USTED ES MARAVILLOSO!!!! ¡Muchas gracias por esto! Me olvidé de eliminar "selectAll (" uni ")" ... ¡Nunca me hubiera dado cuenta de esto! ¿Cuál es el racional detrás de esto? ¿Qué piensas por qué no necesitas volver a enlazar los datos? ¡Me gustaría aprender de eso!
agregado el autor Ewa, fuente
Tan simple como eso, ya veo ... ¡no puedo votarte desafortunadamente! :-( No tengo suficiente reputación ...
agregado el autor Ewa, fuente
¡La aventura d3 continúa! :) Próximo número: JavaScript usa la variable local en otra función "> stackoverflow.com/questions/20638417/… . Tal vez puedas ayudar de nuevo? :)
agregado el autor Ewa, fuente
Así es como se ve: lunobus.com/threelines
agregado el autor cuckovic, fuente
Gracias, también puedes votar mi respuesta :) Los datos ya están destinados a svg, por lo que no es necesario volver a agregarlos.
agregado el autor cuckovic, fuente