d3 multiple svg with 1 row of data each - svg

Question

I'm stuck with a d3.js issue:
I'm trying to draw several SVG canvas with a LINE (it's a more complex custom shape, but as an example the line is sufficient), where the length (called "d.uni") of the line is determined by data. So, each row of the data is mapped to a line within its own SVG.
I looked at the examples that are out there for multiple SVG, like http://bl.ocks.org/mbostock/1305111 and http://bl.ocks.org/mbostock/3888852 and adapted the idea, which is mainly – as far as I get it – to bind data to the SVG drawing function.
Here is my code:
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);
});
As a result I get the expected 3 SVG (see data_test.csv below), but d3 draws each line of the data in every SVG on top of each other, instead of line 1 in SVG 1, line 2 in SVG 2, etc.
What am I missing??? :-/
Many many thanks for your help in advance!
Ewa
data_test.csv:
country,uni
Sweden,1.6
Germany,1
Poland,0.7

Answer 1

You have ".data(data)" two times. One in "Create SVG element" ano one in "Cat 1" and that seems to be reason that d3 draws each line of the data in every SVG. ".data(data)" in "Create SVG element" is enough.
When "Cat 1" is changed to this
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);
I get three different lines.
[edit]
You can also write everything like this:
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);