[英]why is arc labels blurred in my d3js pie chart?
I am having a piechart drawn using d3js.我正在使用 d3js 绘制饼图。 to the arc labels i am applying the following style.
对于弧标签,我正在应用以下样式。
.pieChartOuterLabel {
font-size: 1em;
fill: black;
font-weight: bold;
font-family: 'Times New Roman, Times, serif';
}
this is how my pie chart looks like.这就是我的饼图的样子。 you can see the the percentage text labels are blurred ( it seems the other css styles applied to the parent elements are setting opacity to .5 to these labels).
您可以看到百分比文本标签变得模糊(似乎应用于父元素的其他 css 样式将这些标签的不透明度设置为 0.5)。
i have tried this but it didnt work well.我试过这个,但效果不佳。
.pieChartOuterLabel {
font-size: 1em;
fill: black;
font-weight: bold;
font-family: 'Times New Roman, Times, serif';
opacity: 1 !important;
}
the project is available at here .该项目可在此处获得。 what i expect the arc labels should be displayed in the same style that those in the center text of the doughnut chart.
我期望圆弧标签应该以与圆环图中心文本中的样式相同的样式显示。
https://stackblitz.com/edit/angular-6ufows https://stackblitz.com/edit/angular-6ufows
really appreciate if you can help thank you如果你能帮忙,真的很感激谢谢
我通过删除所有<g>
元素上的opacity:0.5
并使用鼠标事件在弧paths
上应用不透明度来修复它,我还将工具提示移高了一点,因为它很难悬停弧线,这是一个有效的stackblitz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.