D3.jsで矩形にクリックイベント

自分がハマったのでメモ。
以下は矩形を斜めに描写しクリックイベントを乗っけたコード。

  var rectData = [
  {"x":100,"y":300,"width":150,"height":10,"color":"red"},
  ];
  var rect = svg
     .selectAll("rect")
     .data(rectData)
     .enter()
     .append("rect")
     .on("click", function(d){alert();})
     .attr("x",function(d){return d.x;})
     .attr("y",function(d){return d.y;})
     .attr("width",function(d){return d.width;})
     .attr("height",function(d){return d.height;})
     .style("fill",function(d){return d.color;})
     .attr("transform", "rotate(-15)")
}

.on("click", function(d){alert();})をattrの後に書くとなぜか動かなかった。