javascript - R 传单中的集群选项 pi 图表
问题描述
我想在这个问题上做同样的事情:
如何更改 clusterOptions 以在 R 传单中显示饼图?
我复制粘贴并修改了代码,它工作得很好,除了一件事,当聚集的点数太大时,饼图变成“饼图”,如下图所示。
如何调整代码?请注意,我认为,但我不确定是因为我有 11 个组,还是因为某些代码限制了圆圈的大小,所以它变成了正方形而不是圆形。
这是我正在使用的 JS 函数,除了我在开始时更改了组和颜色变量之外,它与 exat 相同:
jsscript3<-
paste0(
"function(cluster) {
const groups= [",paste("'",levels(factor(pts$Sector)),"'",sep="",collapse=","),"];
const colors= {
groups: [",paste("'",beatCol(levels(factor(pts$Sector))),"'",sep="",collapse=","),"],
center:'#ddd',
text:'black'
};
const markers= cluster.getAllChildMarkers();
const proportions= groups.map(group => markers.filter(marker => marker.options.group === group).length / markers.length);
function sum(arr, first= 0, last) {
return arr.slice(first, last).reduce((total, curr) => total+curr, 0);
}
const cumulativeProportions= proportions.map((val, i, arr) => sum(arr, 0, i+1));
cumulativeProportions.unshift(0);
const width = 2*Math.sqrt(markers.length);
const radius= 15+width/2;
const arcs= cumulativeProportions.map((prop, i) => { return {
x : radius*Math.sin(2*Math.PI*prop),
y : -radius*Math.cos(2*Math.PI*prop),
long: proportions[i-1] >.5 ? 1 : 0
}});
const paths= proportions.map((prop, i) => {
if (prop === 0) return '';
else if (prop === 1) return `<circle cx='0' cy='0' r='${radius}' fill='none' stroke='${colors.groups[i]}' stroke-width='${width}' stroke-alignment='center' stroke-linecap='butt' />`;
else return `<path d='M ${arcs[i].x} ${arcs[i].y} A ${radius} ${radius} 0 ${arcs[i+1].long} 1 ${arcs[i+1].x} ${arcs[i+1].y}' fill='none' stroke='${colors.groups[i]}' stroke-width='${width}' stroke-alignment='center' stroke-linecap='butt' />`
});
return new L.DivIcon({
html: `
<svg width='60' height='60' viewBox='-30 -30 60 60' style='width: 60px; height: 60px; position: relative; top: -24px; left: -24px;' >
<circle cx='0' cy='0' r='15' stroke='none' fill='${colors.center}' />
<text x='0' y='0' dominant-baseline='central' text-anchor='middle' fill='${colors.text}' font-size='15'>${markers.length}</text>
${paths.join('')}
</svg>
`,
className: 'marker-cluster'
});
}")
解决方案
推荐阅读
- angular8 - 未捕获的错误:无法绑定到“FormGroup”,因为它不是“form”的已知属性
- javascript - Node.js 中的“非池化”缓冲区是什么?
- visual-studio-2017 - Visual Studio Azure 功能解决方案中存在 XML 文件未发布到 Azure
- azure-logic-apps - 读取 XML 文件并通过 Azure 逻辑应用获取具有相应值的标签
- r - 如何从R中的时间元素获取日期?
- mysql - ProxySQL 主备设置
- python-2.7 - Seaborn KDE 可视化,数据集上的值错误
- javascript - 使用 JavaScript 和 NodeJS 从前端添加到收藏夹
- javascript - 如何突出显示 Highcharts 固定宽度容器中的每个数据点?
- python - 如何转换 HTML 链接中包含的 Unicode?