ClosureAndTransition

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>

JavaScript

function rect() {
  var width = 720, // default width
      height = 80; // default height

  function my(selection) {
    selection.append("rect").attr("width", width).attr("height", height)
  }

  my.width = function(value) {
    if (!arguments.length) return width;
    width = value;
    return my;
  };

  my.height = function(value) {
    if (!arguments.length) return height;
    height = value;
    return my;
  };

  return my;
}

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

chart.width(500);



//go.transition().duration(1000).call(chart.width(30));