D3.js - Zoom/Transform multiple lines - d3.js

Question

I'm struggling with this problem, I'm trying to zoom my chart, specifically the lines that i draw dynamically.
Here my fiddle: https://jsfiddle.net/w3j89Lf3/
<link href="http://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet">
<style>
.axis path {
fill: none;
stroke: #777;
shape-rendering: crispEdges;
}
.axis text {
font-family: Lato;
font-size: 13px;
}
.legend {
font-size: 14px;
font-weight: bold;
}
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
</style>
My code works well with x and y axes, but doesn't work for my lines as you can see in my function "zoomed".
<div class="container">
<div class="jumbotron">
<svg id="visualisation" width="1000" height="500"></svg>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
function InitChart() {
var data = [{
"Client": "ABC",
"sale": "202",
"year": "2000"
}, {
"Client": "ABC",
"sale": "215",
"year": "2002"
}, {
"Client": "ABC",
"sale": "179",
"year": "2004"
}, {
"Client": "ABC",
"sale": "199",
"year": "2006"
}, {
"Client": "ABC",
"sale": "134",
"year": "2008"
}, {
"Client": "ABC",
"sale": "176",
"year": "2010"
}, {
"Client": "XYZ",
"sale": "100",
"year": "2000"
}, {
"Client": "XYZ",
"sale": "215",
"year": "2002"
}, {
"Client": "XYZ",
"sale": "179",
"year": "2004"
}, {
"Client": "XYZ",
"sale": "199",
"year": "2006"
}, {
"Client": "XYZ",
"sale": "134",
"year": "2008"
}, {
"Client": "XYZ",
"sale": "176",
"year": "2013"
}];
var dataGroup = d3.nest()
.key(function(d) {
return d.Client;
})
.entries(data);
var vis = d3.select("#visualisation"),
WIDTH = 1000,
HEIGHT = 500,
MARGINS = {
top: 50,
right: 20,
bottom: 50,
left: 50
};
//Aggiungi ASSI con scala
xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(data, function(d) {
return d.year;
}), d3.max(data, function(d) {
return d.year;
})]),
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(data, function(d) {
return d.sale;
}), d3.max(data, function(d) {
return d.sale;
})]),
xAxis = d3.svg.axis()
.scale(xScale),
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
vis.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
//Aggiungi GRID
function make_x_axis() {
return d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10)
}
function make_y_axis() {
return d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(10)
}
vis.append("svg:g")
.attr("class", "grid")
.attr("transform", "translate(0," + HEIGHT + ")")
.call( make_x_axis()
.tickSize(-HEIGHT, 0, 0)
.tickFormat("")
)
vis.append("svg:g")
.attr("class", "grid")
.call( make_y_axis()
.tickSize(-WIDTH, 0, 0)
.tickFormat("")
)
var lineGen = d3.svg.line()
.x(function(d) {
return xScale(d.year);
})
.y(function(d) {
return yScale(d.sale);
})
.interpolate("basis"); //linear
lSpace = WIDTH/dataGroup.length;
dataGroup.forEach(function(d, i) {
color = "hsl(" + Math.random() * 360 + ",100%,50%)";
vis.append('svg:path')
.attr('d', lineGen(d.values))
.attr('stroke', color)
.attr('stroke-width', 2)
.attr('id', 'line_'+d.key)
.attr('fill', 'none');
vis.append("text")
.attr("x", (lSpace / 2) + i * lSpace)
.attr("y", HEIGHT)
//.style("stroke", "black")
.style("fill", color)
.attr("class", "legend").on('click', function() {
var active = d.active ? false : true;
var opacity = active ? 0 : 1;
d3.select("#line_" + d.key).style("opacity", opacity);
d.active = active;
})
.text(d.key);
});
function zoomed() {
vis.select(".x.axis").call(xAxis);
vis.select(".y.axis").call(yAxis);
vis.selectAll('path.line').attr("d", function(d) {return line(d.values)}); **-> HERE I WOULD ZOOM/TRANSFORM**
}
var zoom = d3.behavior.zoom()
.x(xScale)
.y(yScale)
.scaleExtent([1, 10])
.on("zoom", zoomed);
vis.call(zoom)
}
InitChart();
</script>
</div>
</div>

Answer 1

There are two things that should be changed to make it work.
First in zoom function you end up with an empty selection because the paths do not have line class. Add line class to paths while generating them to make the .selectAll('path.line') work.
Second, you did not bind data to the paths so you cannot use it later in the zoom function. If you pass an anonymous function as the second parameter of .attr then the first argument of this function (d, in your case) will be the data bound to the selection. To make this line work:
vis.selectAll('path.line').attr("d", function(d) {return line(d.values)});
you have to add data to the paths. One way to do it is like this:
vis.append('svg:path').datum(d)
However, there is a better way to bind data and enter new elements than the forEach loop you use. I recommend this very helpful tutorial by Scott Murray that explains d3 data bind.
Here is the updated jsfiddle.