在d3中访问svg元素上的x属性

Question

我试图实现一种变换，其中当用户将鼠标悬停在其上时，元素将几个像素向左移动几个像素。如何访问条形图的x属性，以便传递相对位置？

这是我的代码;它非常标准，只是我在条形图上没有轴。

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


var tip = d3.tip() 
    .attr('class','d3-tip') 
    .html(function(d, i) {
      return "<span style='color:red'>" + d.Word +"</span>";
  });


svg.selectAll("rect")
  .data(words)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return i*(w/dataset.length);
  })
  .attr("y", function(d){
    return (h-(800) 
      );
  })
  .attr("width", 40)
  .attr("class", "rectangle")
  .attr("id", function(d, i){return "rect"+i})
  .attr("height", function(d, i){
    // var barheight = d.Dispersion*100
    return "200px" 
  })
  .on("mouseover", tip.show)
  .on("mouseout", tip.hide);
svg.call(tip);

$('.rectangle').mouseover(function () {
  var rect = d3.select("#"+this.id)
  rect.transition()
      .duration(500)
      .attr("width", 58)
      .duration(500)
      .attr("height", 220+"px")
      .style("fill", function(d, i) {return d.color}); 
      .attr("x", 50) //this goes to a particular position in the parent node 
  });