创建一个将代码中的所有内容都包含在内的函数，并进行两个函数调用
function drawChart(url, id, key) {
d3.json(url)
.then(function(data) {
data = data.filter(dataPoint => dataPoint.year == 2015);
const heightValue = 300;
const widthValue = 600;
const strokeWidth = 1.5;
const margin = {
top: 0,
bottom: 20,
left: 30,
right: 20
};
var width = 600 - margin.left - margin.right - (strokeWidth * 2);
var height = 250 - margin.top - margin.bottom;
var radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal()
.range(["#e688a1", "#ed9a73", "#e3c878", "#64b2cd", "#e1b12c", "red", "green", "violet", "steelblue"]);
var pie = d3.pie()
.value(function(d) {
return d[key];
})(data);
var arc = d3.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var svg =
d3
.select(id)
.append("svg")
.attr("viewBox", `0 0 ${widthValue} ${heightValue}`)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g = svg.selectAll("arc")
.data(pie)
.enter().append("g")
.attr("class", "arc")
g.on('mouseover', function(d, i) {
d3.select(this).transition()
.duration('50')
.attr('opacity', '.95')
.attr("stroke", "#23374d")
g.append("text")
.attr("class", "text remove")
.style("text-anchor", "middle")
.attr("stroke", "#23374d")
.attr("fill", "#23374d")
.text(d.data.country_name)
})
.on('mouseout', function(d, i) {
d3.select(this).transition()
.duration('50')
.attr('opacity', '1')
.attr("stroke", "none")
g.select(".text.remove").remove();
})
.attr('transform', 'translate(0, 0)');
g.append("path")
.attr("d", arc)
.style("fill", function(d) {
return color(d.data.country_name);
});
g
.append("text")
.attr("text-anchor", "middle")
.attr("x", function(d) {
var a = d.startAngle + (d.endAngle - d.startAngle) / 2 - Math.PI / 2;
d.cx = Math.cos(a) * (radius - 45);
return d.x = Math.cos(a) * (radius + 30);
})
.attr("y", function(d) {
var a = d.startAngle + (d.endAngle - d.startAngle) / 2 - Math.PI / 2;
d.cy = Math.sin(a) * (radius - 12);
return d.y = Math.sin(a) * (radius - 5);
})
.text(function(d) {
return d.value.toFixed(2);
})
.each(function(d) {
var bbox = this.getBBox();
d.sx = d.x - bbox.width / 2 - 2;
d.ox = d.x + bbox.width / 2 + 2;
d.sy = d.oy = d.y + 5;
});
g.append("path")
.attr("class", "pointer")
.style("fill", "none")
.style("stroke", "#2c3e50")
.attr("d", function(d) {
if (d.cx > d.ox) {
return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;
} else {
return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
}
});
});
}
drawChart("https://raw.githubusercontent.com/cvrnogueira/CODWorkData/master/database/topfive/biggestEarthFootprint.json",
"#donut",
"earth_footprint"
)
drawChart("https://raw.githubusercontent.com/cvrnogueira/CODWorkData/master/database/topfive/biggestIHD.json",
"#donut2",
"IHD"
)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v5.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="donut"></div>
<br>
<br>
<div id="donut2"></div>
</body>
</html>因此，您的函数现在使用url，要加载的ID和要从数据中读取的密钥。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句