如何在d3js中的每个值线的每个点上附加一个圆？

var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var lines = svg.selectAll(".line")
               .data(data)
               .enter()
               .append("path")
               .attr("class", "line")
               .attr("d", line);

var circles = svg.selectAll(".circle")
                 .data(data)
                 .enter()
                 .selectAll("circle")
                 .data(function(d) { return d; })
                 .enter()
                 .append("circle")
                 .attr("class", "circle")
                 .attr("cx", function(d) { return xScale(d.x); })
                 .attr("cy", function(d) { return yScale(d.y); })
                 .attr("r", 5)
                 .attr("fill", "red");