d3.js multi y-axis line chart - d3.js

Question

I've made a chart with multiple y-axis values that are being plotted as circles. I now want to connect each y-axis value set with lines (a line chart basically).
I think my error lies in how I am attempting to define the y-axis line value:
var line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y1, d.y2, d.y3); });
Here is my dataset:
var dataset = [
{x: d3.time.hour.utc.offset(now, -5), y1: 1, y2: 3, y3: 2},
{x: d3.time.hour.utc.offset(now, -4), y1: 2, y2: 2, y3: 4},
{x: d3.time.hour.utc.offset(now, -3), y1: 3, y2: 3, y3: 1},
{x: d3.time.hour.utc.offset(now, -2), y1: 4, y2: 1, y3: 2},
{x: d3.time.hour.utc.offset(now, -1), y1: 5, y2: 5, y3: 3},
{x: now, y1: 6, y2: 4, y3: 3},
];
And here is a complete example of my graph as of now: http://jsbin.com/edikeg/1/edit
I've read the line() method api reference but am not sure what else to try. If anyone could recommend the best approach to take to accomplish this, as well as any addition d3.js starting out tips or beginner resources to look into I would greatly appreciate it.
Thanks

Answer 1

First, your dataset is in a non-optimal format. A better format would be to create a single object for each line/point set:
var dataset = [
[
{x: d3.time.hour.utc.offset(now, -5), y: 1},
{x: d3.time.hour.utc.offset(now, -4), y: 2},
{x: d3.time.hour.utc.offset(now, -3), y: 3},
{x: d3.time.hour.utc.offset(now, -2), y: 4},
{x: d3.time.hour.utc.offset(now, -1), y: 5},
{x: now, y: 1}
],
[
// y2-values paired with x-values
],
[
// y3-values paired with x-values
]
];
Why, you ask? Because creating objects and groups of objects with d3 will be easier. You could also just write a map function to convert your current data into this format, if you need to.
Now, with your data in an easier format, the code for creating the lines and circles won't be dependent on the number of items in your dataset. Check out a working, rewritten version here:
http://jsbin.com/edikeg/3/edit
Basic explanation of what's happening:
For each item in the dataset, we create g.line, a pathContainer to hold each path and each of its circle points.
var pathContainers = svg.selectAll('g.line')
.data(dataset);
pathContainers.enter().append('g')
.attr('class', 'line');
Then, in each pathContainer, we create a path.
pathContainers.selectAll('path')
.data(function (d) { return [d]; }) // continues the data from the pathContainer
.enter().append('path')
.attr('d', d3.svg.line()
.x(function (d) { return xScale(d.x); })
.y(function (d) { return yScale(d.y); })
.interpolate('monotone')
);
Last, we create a circle for each point in the dataset for each pathContainer
pathContainers.selectAll('circle')
.data(function (d) { return d; })
.enter().append('circle')
.attr('cx', function (d) { return xScale(d.x); })
.attr('cy', function (d) { return yScale(d.y); })
.attr('r', 5);
Hope this helps!