如何解决不完整的森伯斯特细分市场
我一直在试图了解d3 v5 sunburst中使用的arc函数,但我不太了解。我可以绘制森伯斯特,但一旦超出1的深度,弧线就不完整。它们似乎大约是进行程序部分的大小的一半。有人可以解释我在这里丢失的那一部分吗?
let data = {
"name": "DEMO","children": [{
"Build": "1","value": "90","children": [{
"Build": "1","value": "70","children": [{
"Build": "1","value": "60",}]
}]
},{
"Build": "2","value": "95","children": [{
"Build": "2","value": "85","children": [{
"Build": "2","value": "65",}]
}]
}
]
}
function createSunBurst(data) {
let container = document.getElementById("container")
let width = 200
let height = 200
let radius = (Math.min(width,height) / 2) - 5
let format = d3.format(",d")
let partition = data => d3.partition()
.size([2 * Math.PI,radius])(d3.hierarchy(data)
.sum(d => d.value)
.sort((a,b) => b.value - a.value))
let root = partition(data)
d3.select("#container")
.append("svg")
let svg = d3.select("svg")
.style("width","100%")
.style("height","100%")
.attr("id","canvas")
.append("g")
.attr("class","center-group")
let arc = d3.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.innerRadius(d => d.y0)
.outerRadius(d => d.y1 - 0)
svg.selectAll("path")
.data(root.descendants().filter(d => d.depth))
.enter()
.append("path")
.attr("stroke","white")
.attr("fill","green")
.style("fill-rule","evenodd")
.attr("d",arc)
}
createSunBurst(data)
#container {
height: 100vh;
}
.center-group {
transform: scale(1,1) translate(50%,50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="container">
</div>
解决方法
自此发布以来,我一直在继续研究。我已经解决了我的问题。弧线不是问题。相反,问题出在我最初计算分区数据之和的方式上。
阅读此answer后,我解决了问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。