<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>testD3-3-drawingDivBar</title> <script type="text/javascript" src="resource/d3.v5.min.js"></script> <style type="text/css"> /********* Begin / / End / </style> </head> <body> <div id="d3"></div> <script type="text/javascript"> / Begin / / End *********/ </script> </body> </html>要求补全代码完成以下任务: 选择id为d3的div进行绘图。层数量为5。 层间距为10px。 层宽度为25px。 层高度为175px,效果形状是阶梯状
时间: 2023-07-02 08:08:47 浏览: 144
以下是补全后的代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>testD3-3-drawingDivBar</title>
<script type="text/javascript" src="resource/d3.v5.min.js"></script>
<style type="text/css">
#d3 {
width: 150px;
height: 200px;
background-color: #ccc;
display: flex;
justify-content: flex-end;
}
.bar {
width: 25px;
margin-left: 10px;
background-color: blue;
}
</style>
</head>
<body>
<div id="d3"></div>
<script type="text/javascript">
// 选择id为d3的div进行绘图
const svg = d3.select("#d3")
.append("svg")
.attr("width", "100%")
.attr("height", "100%");
// 层数量为5。层间距为10px。层宽度为25px。层高度为175px,效果形状是阶梯状
const data = [175, 150, 125, 100, 75];
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", (d, i) => i * 35)
.attr("y", d => 200 - d)
.attr("width", 25)
.attr("height", d => d);
</script>
</body>
</html>
```
解释:
1. 样式中设置 `display: flex;` 和 `justify-content: flex-end;` 是为了让矩形从右往左排列。
2. `x` 属性设置为 `(d, i) => i * 35`,其中 `i` 表示当前数据的索引,也就是第几个矩形,`35` 是一个矩形的宽度和层间距的和。
3. `y` 属性设置为 `d => 200 - d`,其中 `200` 是 `div` 的高度,`d` 是数据数组中的元素值,表示当前矩形的高度。这样设置可以让矩形从下往上排列,并且顶部对齐。
4. `width` 属性设置为 `25`,与样式中的层宽度相同。
5. `height` 属性设置为 `d => d`,与数据中的元素值相同,表示当前矩形的高度。
阅读全文