在上一集中，我们创建了一个小应用程序。以一种非常无聊的方式显示您有多少可用磁盘空间。
现在是时候给它加点料了！我们根本不会触及后端，只修改前端部分。
安装D3
首先，我们需要安装D3。
npm install d3
这是前端的HTML代码。我提前添加了一些样式：
<!DOCTYPE html>
<html>
<body>
<style>
body { text-align: center; }
#info { display: grid; grid-template-columns: 1fr 1fr 1fr; }
</style>
<h1>Free disk space</h1>
<div id="info"></div>
<script src="./node_modules/d3/dist/d3.js"></script>
<script src="app.js"></script>
</body>
</html>
D3应用程序
这是D3的应用程序，我不会解释得太详细，因为D3是一个很大的主题。
我们通过displayFreeDiskSpace 后台获取data。
function displayFreeDiskSpace(data) {
let info = d3.select("#info")
for (let row of data) {
let total = parseInt(row[1])
let used = parseInt(row[2])
let free = total - used
let path = row[5]
let data = { free, used }
let div = info.append("div")
div.append("h3").text(path)
let svg = div
.append("svg")
.attr("width", "100px")
.attr("height", "100px")
let g = svg
.append("g")
.attr("transform", "translate(50,50)")
let pie = d3.pie().value(d => d[1])
let pieData = pie(Object.entries(data))
let color = d3
.scaleOrdinal()
.domain(["used", "free"])
.range(["red", "green"])
g
.selectAll("path")
.data(pieData)
.enter()
.append("path")
.attr("d", d3.arc()
.innerRadius(0)
.outerRadius(45)
)
.attr("fill", d => color(d.data[0]))
.attr("stroke", "black")
.style("stroke-width", "2px")
.style("opacity", 0.7)
}
}
