d3.js - 将 d3 圆环图从 v4 更新到 v5
问题描述
我正在将一些 d3.js 代码从 v4.13.0 更新到 v5.7.0。
我看不到这个图表类型的版本号之间有什么变化,我很困惑。https://github.com/d3/d3-shape#arcs
我在这里想念什么?
并且非常感谢有关此代码段代码改进的任何一般性建议。
非常感谢,
奥马利
$rootScope.drawInfo = (data, parent, status) => {
const svg = d3.select(parent);
svg.selectAll("path").remove();
svg.selectAll("text").remove();
const backgroundColors = ["#3273dc", "#ff3860", "#ffdd57"];
let dataTotal = 0;
const arrWithSum = [0, 0, 0];
if (data.length === 0) {
return;
}
for (let i = 0; i < data.length; i += 1) {
dataTotal += 1;
switch (data[i].opinion) {
case 0:
arrWithSum[0] += 1;
break;
case 1:
arrWithSum[1] += 1;
break;
case 2:
arrWithSum[2] += 1;
break;
}
}
const indexMax = _.indexOf(arrWithSum, _.max(arrWithSum));
const arcOutMain = d3
.arc()
.innerRadius(45)
.outerRadius(65)
.startAngle(0)
.endAngle((2 * Math.PI * arrWithSum[indexMax]) / dataTotal);
svg
.append("path")
.attr("transform", "translate(65,65)")
.attr("d", arcOutMain)
.attr("fill", backgroundColors[indexMax]);
const arcOutGrey = d3
.arc()
.innerRadius(45)
.outerRadius(65)
.startAngle((2 * Math.PI * arrWithSum[indexMax]) / dataTotal)
.endAngle(2 * Math.PI);
svg
.append("path")
.attr("transform", "translate(65,65)")
.attr("d", arcOutGrey)
.attr("fill", "#f4f5f7");
const per = ((arrWithSum[indexMax] / dataTotal) * 100).toFixed(0);
svg
.append("text")
.attr("x", 70)
.attr("y", 70)
.attr("fill", "#263238")
.attr("font-size", "1.5em")
.attr("font-weight", "bold")
.attr("text-anchor", "middle")
.attr("font-family", "'Roboto',sans-serif")
.text(per + "%");
};
解决方案
推荐阅读
- spring-boot - Spring Boot 版本不匹配
- python - 将 MXNet 'pick' 运算符导出到 ONNX
- debugging - Pycharm 调试器没有名为“spacy.tokens”的模块
- javascript - videojs player.textTracks() 在 safari 上返回错误类型的对象,无法捕获 TextTrack cuechange 事件
- clickhouse - 我可以通过分布式表和单个分片同时插入分片表吗?
- angular - 角度 rxjs 订阅拆解
- file-format - MagicaVoxel .vox 文件格式 | 位置存储在哪里?
- python - 再次从聚合中查找特定结果/过滤聚合结果?
- laravel-livewire - 如果执行操作,Livewire 闪烁消息仅出现一次
- regex - 如何使用正则表达式将放置在单行上的声明转换为多行?