我目前正在学习 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
具有较小框的边距。
最佳答案
您需要输入选择!
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>
关于javascript - 有没有办法避免 d3.js 中的代码重复?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57188723/