javascript - 有没有办法避免 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 具有较小框的边距。

Answer 1

您需要输入选择!

D3 代表 Data-Driven D文档(即是 DDD 或 D3)。如果您没有使用 D3 的数据绑定(bind)功能，那么您就错过了使用 D3 的全部意义! other answer尽管意图良好，但也完全忽略了这一点。

长话短说，在矩形中只有 x 位置发生变化。因此，就您而言，这就是您需要的数据(可以大大简化，但我离题了)，一个包含所有这些位置的数组:

var data = [boxMidpoint - smallBoxDim.width - smallBoxMargin.right, boxMidpoint + smallBoxMargin.left, 
    boxMidpoint - 2 * smallBoxDim.width - 2 * smallBoxMargin.right - smallBoxMargin.left, 
    boxMidpoint + smallBoxDim.width + 2 * smallBoxMargin.left + smallBoxMargin.right
];

有了该数据数组，这就是输入选择:

var rects = boxSvg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("class", "smallBox")
  .attr("width", smallBoxDim.width)
  .attr("height", smallBoxDim.height)
  .attr("fill", "orange")
  .attr("x", function(d) {
    return d
  })
  .attr("y", smallBoxMargin.top);

这就是您不需要一次又一次重复代码所需要的一切...

这是演示:

var smallBoxMargin = {top: 20, bottom: 20, left: 20, right: 20};
var boxH = 150;
var w = 400;
var smallBoxDim = {
  width: (w / 4) - smallBoxMargin.left - smallBoxMargin.right,
  height: boxH - smallBoxMargin.top - smallBoxMargin.bottom
};
var boxSvg = d3.select("body")
  .append("svg")
  .attr("height", boxH)
  .attr("width", w);
var boxMidpoint = w / 2;
var data = [boxMidpoint - smallBoxDim.width - smallBoxMargin.right, boxMidpoint + smallBoxMargin.left, boxMidpoint - 2 * smallBoxDim.width - 2 * smallBoxMargin.right - smallBoxMargin.left, boxMidpoint + smallBoxDim.width + 2 * smallBoxMargin.left + smallBoxMargin.right];

var rects = boxSvg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("class", "smallBox")
  .attr("width", smallBoxDim.width)
  .attr("height", smallBoxDim.height)
  .attr("fill", "orange")
  .attr("x", function(d) {
    return d
  })
  .attr("y", smallBoxMargin.top);

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