无法将id属性赋予元素

Question

我正在使用d3和raphael。我的要求是创建一个x轴，然后在两端附加按钮。但它无法给它id。有没有办法给id或使用元素。因为我天真，我不太了解它

    var raphael = new Raphael(0, 0, "100%", "100%");
raphael.setStart();
d3_raphael = d3.raphael(raphael);


svg = d3_raphael.select("body").append("svg:svg")
.attr("width",svg_w)
.attr("height",svg_h);



    xAxis.scale(x)
svg.select("#x_axis")
    .call(xAxis);
d3_raphael.call(xAxis); 


svg.selectAll("#year_bar")
    .data([0])
    .enter()
    .append("rect")
    .attr("id", "year_bar")
    .attr("x", 0)
    .attr("y", 4)
    .attr("width", 0)
    .attr("height", 10);

   svg.selectAll(".year_button")
    .data([minYearFilter, maxYearFilter+1])
    .enter()
    .append("svg:path")
    .attr("class", "year_button")
    .attr("d", "M-7,4L-7,15L0,22L7,15L7,4L-7,4")
    .attr("id", function(d, i) { return i == 0 ? "min_year" : "max_year"; })
    .attr("selected", "false")
    .attr("y", 4);

        yearSetX(0, x(minYearFilter));      
    yearSetX(1, x(maxYearFilter+1));


   function yearSetX(i, x) {
if (i == 0) {
    barMinYearX = x;
debugger;
    var btn = d3_raphael.selectAll("#min_year");
} else {
    barMaxYearX = x;
    var btn = d3_raphael.select("#max_year");
}
//btn.attr("transform", function(d) { return "translate(" + x + ",0)"; });
btn.attr("x",x);
btn.attr("y",0);
btn.attr("fill", "gray");
btn.attr("stroke","gray");

if ((barMinYearX != undefined) && (barMaxYearX != undefined)) {
    d3_raphael.select("#year_bar")
        .attr("x", barMinYearX+7)
        .attr("width", (barMaxYearX - barMinYearX - 13));
}
  }