为什么我的d3js饼图中的弧形标签模糊? [英] why is arc labels blurred in my d3js pie chart?

问题描述

我正在使用d3js绘制一个饼图.我在弧形标签上应用了以下样式.

I am having a piechart drawn using 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';
}

这是我的饼形图.您会看到百分比的文本标签模糊(似乎应用于父元素的其他css样式正在将这些标签的不透明度设置为.5.

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).

我已经尝试过了，但是效果不好.

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

非常感谢您能提供的帮助 谢谢

really appreciate if you can help thank you

推荐答案

我通过删除所有<g>元素上的opacity:0.5并使用鼠标事件在圆弧paths上应用了不透明度来修复它，我也将工具提示移了一点，因为它很难使弧线悬停，这是一个有效的

I fixed it by removing the opacity:0.5 that you have on all your <g> elements, and applying the opacity on the arcs paths using mouse events, also I moved the tooltip a bit higher since it makes it hard to hover the arcs, here is a working stackblitz

这篇关于为什么我的d3js饼图中的弧形标签模糊?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！