森伯斯特不完整片段
Sunburst incomplete Segments
我一直在尝试理解 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>
自发布这篇文章以来,我一直在继续研究。我已经解决了我的问题。电弧不是问题。相反,问题在于我最初计算分区数据总和的方式。
阅读这篇文章后我解决了我的问题 。
我一直在尝试理解 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>
自发布这篇文章以来,我一直在继续研究。我已经解决了我的问题。电弧不是问题。相反,问题在于我最初计算分区数据总和的方式。
阅读这篇文章后我解决了我的问题