D3: Cannot select an item based on its id

Question

I would like to visualize a bunch of circles on my screen and make them dragable. I am assigning an unique id to each circle. Later I am trying to select a particular circle by its id inside the on("dragend", ..) event but I am receiving following error:

SyntaxError: An invalid or illegal string was specified1 d3.js:549:0

    var drag = d3.behavior.drag()
        .on("drag", function(d,i) {
            d3.select(this).attr("cx", d3.event.x)
            d3.select(this).attr("cy", d3.event.y) 
         })

        .on("dragend",function(d,i){    
            var previous= d3.select("#3")  // Here I am getting Error
            console.log(previous);
         });

var circle = svg.selectAll('circle')
    .data(csv)
    .enter()
    .append("circle")
    .attr("stroke", "black")
    .attr("id",function(d,i){return i;})
    .attr("fill", function(d) {return color(d.Cyl);})
    .attr("cx", function(d) { return xScale(d.Weight); })
    .attr("cy", function(d) { return yScale(d.DealerCost); })
    .attr("r", function(d) { return d.EngineSize+2; })
     .call(drag);

How can I solve this problem?

Answer 1

The problem is exactly what you get in the error message -- you can't start an ID with a number. To fix, simply prefix:

.attr("id",function(d,i){return "id_" + i;})

.on("dragend",function(d,i){    
        var previous= d3.select("#id_" + (i-1))  // Here I am getting Error
        console.log(previous);
     });

The CSS specification defines valid identifiers.