Nodes not appearing for second line in d3.js - d3.js

Question

I have a chart with 2 lines using d3.js.Both the line comes from different dataset but y axis range is same for both the lines. I am displaying the nodes for both the line.Nodes for first line appears fine.But nodes for second line doesn't appear.Can anybody please tell me what is the problem?? Here is my code for nodes and line.
var vis = d3.select('#visualisation'),
WIDTH = 400,
HEIGHT = 400,
MARGINS = { top: 20, right: 20, bottom: 20, left: 50 },
xRange = d3.scale.ordinal().rangeBands([MARGINS.left, WIDTH - MARGINS.right], 0.4).domain(barData.map(function (d) { return d.x; })),
y1Range = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0, d3.max(barData1, function (d) { return d.y1; })]),
xAxis = d3.svg.axis().scale(xRange).tickSize(5);
y1Axis = d3.svg.axis().scale(y1Range).tickSize(5).orient("right").tickSubdivide(true);
/*Draw X Axis values*/
vis.append('svg:g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + (HEIGHT-MARGINS.bottom) + ')')
.call(xAxis);
/*Draw Y1 Axis values*/
vis.append('svg:g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + (HEIGHT - MARGINS.bottom) + ',0)')
.call(y1Axis);
/*Draw the First Line*/
var lineFunc = d3.svg.line()
.x(function (d) {
return (xRange(d.x))+MARGINS.right;
})
.y(function (d) {
return y1Range(d.y1);
})
.interpolate('linear');
/*Animate the line*/
var path1 = vis.append('svg:path')
.attr("d", lineFunc(barData1))
.attr("stroke", "#00CC66")
.attr("stroke-width", 2)
.attr("fill", "none");
var totalLength = path1.node().getTotalLength();
path1.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(1000)
.ease("linear")
.attr("stroke-dashoffset", 0);
/*Draw the circles*/
var circles = vis.selectAll("circle").data(barData1);
circles.enter()
.insert("circle")
.attr("cx", function (d) { return (xRange(d.x))+MARGINS.right; })
.attr("cy", function (d) { return y1Range(d.y1); })
.attr("r", 3)
.style("fill", "#00CC66");
/*Draw the Second Line*/
var lineFunc1 = d3.svg.line()
.x(function (d) {
return (xRange(d.x))+MARGINS.right;
})
.y(function (d) {
return y1Range(d.y2);
})
.interpolate('linear');
var path2= vis.append('svg:path')
.attr("d", lineFunc1(barData2))
.attr("stroke", "#CB347D")
.attr("stroke-width", 2)
.attr("fill", "none")
.attr('class', 'line');
var totalLength = path1.node().getTotalLength();
path2.attr("stroke-dasharray", totalLength + " " +totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(1000)
.ease("linear")
.attr("stroke-dashoffset", 0);
/*Draw the circles for second line*/
var circles = vis.selectAll("circle").data(barData2);
circles.enter()
.insert("circle")
.attr("cx1", function (d) { return (xRange(d.x)) + MARGINS.right; })
.attr("cy2", function (d) { return y1Range(d.y2); })
.attr("r", 3)
.style("fill", "#CB347D");

Answer 1

The problem is that when adding the second set of circles, you're selecting the first set that has just been created:
vis.selectAll("circle").data(barData2)
This selection will contain all the circles you've just added. Then you're matching the data to it, which is fine, but the enter selection will be empty (all data items matched to existing circles). Therefore, the following code, which operates only on the enter selection, does nothing.
The easiest way to fix this is to add a distinguishing class to the second set of circles (and ideally the first one as well):
var circles = vis.selectAll("circle.second").data(barData2);
circles.enter()
.insert("circle")
.attr("class", "second")
// ...