在我的项目中，我需要创建一个圆环图，所以我使用 d3js。 创建图表后加载页面时，图表的第一个值应突出显示，并且该值应显示在中心
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> D3 Js Example </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div id="my_dataviz"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.min.js" ></script>
<script>
var width = 450
height = 450
margin = 40
var radius = Math.min(width, height) / 2 - margin
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var data = {a: 9, b: 20, c:30, d:8, e:12}
var color = d3.scaleOrdinal()
.domain(data)
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"])
var pie = d3.pie()
.value(function(d) {return d.value; })
var data_ready = pie(d3.entries(data))
svg
.selectAll('whatever')
.data(data_ready)
.enter()
.append('path')
.attr('d', d3.arc()
.innerRadius(100)
.outerRadius(radius)
)
.attr('fill', function(d){ return(color(d.data.key)) })
.attr("stroke", "black")
.style("stroke-width", "2px")
.style("opacity", 0.7)
</script>
</body>
</html>最佳答案
弧形函数为构成 donut 段的每个 path 元素的 d 属性生成内容。
因此，一种方法是使用与绘制其他线段不同的弧形生成器来绘制第一线段(具有不同的内半径和外半径设置)。您可以使用为 attr() 方法提供的函数的第二个参数，它是数据的索引(请参阅示例)。
您可以对颜色执行相同的操作。对于第一段的填充属性，指定您的特定突出显示颜色，否则使用您的色标来生成它:
var normalArc = d3.arc().innerRadius(100).outerRadius(185);
var biggerArc = d3.arc().innerRadius(85).outerRadius(200);
svg
.selectAll('whatever')
.data(data_ready)
.enter()
.append('path')
.attr('d', function(d, index) {
// If this is the first segment make it a wider arc
if(index === 0) {
return biggerArc(d);
} else {
return normalArc(d);
}
})
.attr('fill', function(d, index){
// If this is the first segment, highlight it.
if(index === 0) {
return '#ff1dce';
} else {
return(color(d.data.key))
}
})
.attr("stroke", "black")
.style("stroke-width", "2px")
.style("opacity", 0.7);
关于javascript - d3js 圆环图 - 突出显示第一个数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57464719/