小编J. *_*ley的帖子

我目前正在学习d3，并且正在创建一个SVG，其中包含四个以水平线组织的矩形。它们都具有相同的大小，高度和颜色。制作每个rect对象时有很多冗余，我想知道是否有一种优化它的方法。

我想知道是否有一种方法可以制作一个rect对象并设置我需要的几乎所有属性（高度，宽度，y位置，填充颜色），然后进入每个矩形创建四个副本并只设置x-我想要的位置。我实际上并没有使用JS编写太多代码，并且习惯于Java，因此某些对象创建语法和过程对我来说是陌生的。

var smallBoxMargin = {top: 20, bottom: 20, left: 20, right: 20};
    var boxH = 150;
    var smallBoxDim = {width: (w/4)-smallBoxMargin.left-smallBoxMargin.right, height: boxH-smallBoxMargin.top-smallBoxMargin.bottom}
    var boxSvg = d3.select("#boxDiv")
      .append("svg")
      .attr("height",boxH)
      .attr("width",w);
    var boxMidpoint = w/2;
    boxSvg.append("rect") //inner left box
      .attr("class","smallBox")
      .attr("width",smallBoxDim.width)
      .attr("height",smallBoxDim.height)
      .attr("fill",eteOrange)
      .attr("x", boxMidpoint - smallBoxDim.width - smallBoxMargin.right)
      .attr("y", smallBoxMargin.top) 
    boxSvg.append("rect") //inner right box
      .attr("class","smallBox")
      .attr("width",smallBoxDim.width)
      .attr("height",smallBoxDim.height)
      .attr("fill",eteOrange)
      .attr("x", boxMidpoint+smallBoxMargin.left)
      .attr("y", smallBoxMargin.top)
    boxSvg.append("rect") //outer left box
      .attr("class","smallBox")
      .attr("width",smallBoxDim.width)
      .attr("height",smallBoxDim.height)
      .attr("fill",eteOrange)
      .attr("x", boxMidpoint-2*smallBoxDim.width - 2*smallBoxMargin.right-smallBoxMargin.left)
      .attr("y", …