一个 JS 封装代码的问题

在写 d3 的相关内容，不过我 JS 掌握不是很多。 题目要求组块化，我就想把画矩形的函数给封装起来，当做一个方法，以后画矩形的话只要调用一下就行了。以前学过一些 sql，考虑用 sql 的方式拼装，结果好像不太行，不知道有谁能指导一下怎么做么，或者有什么好的方法。

这里是原来我写的代码

	var rect = svg.selectAll("rect")
         .data(dataset)  // 绑定数据
          .enter()        // 获取 enter
          .append("rect") // 添加 rect 元素，绑定和数组长度一致
          .attr("fill", "steelblue") // 设置填充颜色
          .attr("x", function(d, i){ // x
            return padding.left + i * rectStep;
          })
          .attr("y", function(d){ //y
            return height - padding.bottom - d;
          })
          .attr("width", rectWidth) // 设置矩形的高度
          .attr("height", function(d){
            return d;
          })

这里开始是我封装的代码，但是封装的方式不对，我是想把自己固定想要传的参数写清楚，其他不固定的参数，就放在一个数组里传进来，最后的参数[["attr",["fill", "blue"]],["attr",["fill","pink"]] 放进来以后，可以在 svg 最后执行的位置，执行 .attr("fill", "blue").attr("fill", "pink") 如果是其他的方法当然执行的不同，不过自己试了一下，根本行不通啊！！！原来的代码不难，就是封装没思路，请指教一下谢谢！

另外补充一点，我知道可以 attr({key1: value1}, {key2, value2})的方式设置多个属性，但是这种方法的思路有局限性，就比如说要给它添加一个 mouseover 事件，没办法添加，类似这里结尾

  svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return x(d.city); })
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.money); })
  .attr("height", function(d) { return height - y(d.money); })
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide)

封装代码：

function Rect(svg, data, width, height, x, y, argsarray ){
 var length = argsarray.length;
   var co ='';
 for (var i = 0; i < argsarray.length; i++) {
   co += '.' +argsarray[i][0] + '("' + argsarray[i][1][0] + '","' +argsarray[i][1][1] +'")';
  console.log(co);
 // 这里输出 .attr("fill","blue").attr("fill","pink") 
 }
  svg.selectAll("rect")
               .data(data)  // 绑定数据
               .enter()        // 获取 enter
            .append("rect") // 添加 rect 元素，绑定和数组长度一致
            .attr("x", x)
            .attr("y", y)
            .attr("width", width) // 设置矩形的高度
            .attr("height", height)
            //.(eval(co));
}
var getRectx = function(d, i){ return padding.left + i * rectStep};
var getRecty = function(d){ return height - padding.bottom - d};
var getHeight = function(d){ return d};

Rect(svg, dataset, rectWidth, getHeight, getRectx, getRecty, [["attr",["fill", "blue"]],["attr",["fill","pink"]]]);

这里设置成蓝色又设置成粉色就是看看数组中多属性能不能使用。