有没有办法避免 d3.js 中的代码重复？

Question

我目前正在学习 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", smallBoxMargin.top)    boxSvg.append("rect") //outer right box      .attr("class","smallBox")      .attr("width",smallBoxDim.width)      .attr("height",smallBoxDim.height)      .attr("fill",eteOrange)      .attr("x", boxMidpoint+smallBoxDim.width+2*smallBoxMargin.left+smallBoxMargin.right)      .attr("y", smallBoxMargin.top)上面的代码有效，它只是在 class、width、height、fill 和 y 的属性中非常多余。每个boxSvg.append("rect")都是新矩形元素的开始。 smallBoxDim具有较小框的尺寸，具有较小框smallBoxMargin的边距。