如何在没有框架d3.js的情况下在每个饼图中放置值文本。
我已经尝试使用一些JavaScript来获取宽度。它是默认值
getBBox()); // get the SVG width.
我使用stroke-dasharray扩展了饼图空间。
我可以通过哪种方式从JavaScript获取正确的笔触-破折号大小？
figure {
background-color: #eee;
display: block;
height: 0;
margin: 0 auto;
position: relative;
font-size:16px;
font-size:1vw;
width: 40em;
padding-bottom: 40em;
}
svg {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: visible;
}
circle {
fill:transparent;
stroke-width:31.8309886184;
stroke-dasharray: 0,0,0,100;
stroke-dashoffset: 25;
animation: pie1 4s ease both;
}
.pie1 {
stroke:pink;
}
.pie2 {
stroke: green;
-webkit-animation-name: pie2;
animation-name: pie2;
}
.pie3 {
stroke: aqua;
-webkit-animation-name: pie3;
animation-name: pie3;
}
@keyframes pie1 {
50%,100% {stroke-dasharray: 40,60,0,0;}
}
@keyframes pie2 {
50%,100% {stroke-dasharray: 0,40,30,30;}
}
@keyframes pie3 {
50%,100% {stroke-dasharray: 0,70,30,0;}
}<body>
<figure>
<svg class="chart" viewBox="0 0 63.6619772368 63.6619772368">
<circle class="pie1" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
<circle class="pie2" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
<circle class="pie3" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
</svg>
</figure>
</body>你不能。 getBBox()获取形状的边界。在您的情况下，形状是围绕图中心居中的圆圈。您将需要使用三角函数来计算文本的位置。
makeLabel('Pink', 340, 15.9);
makeLabel('Green', 110, 15.9);
makeLabel('Cyan', 210, 15.9);
function makeLabel(text, angle, radius)
{
const chart = document.getElementById("chart");
const label = document.createElementNS(chart.namespaceURI, "text");
label.classList.add("label");
label.setAttribute("x", 31.83 + Math.cos(angle * Math.PI/180) * radius);
label.setAttribute("y", 31.83 + Math.sin(angle * Math.PI/180) * radius);
label.textContent = text;
chart.appendChild(label);
}figure {
background-color: #eee;
display: block;
height: 0;
margin: 0 auto;
position: relative;
font-size:16px;
font-size:1vw;
width: 40em;
padding-bottom: 40em;
}
svg {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: visible;
}
circle {
fill:transparent;
stroke-width:31.8309886184;
stroke-dasharray: 0,0,0,100;
stroke-dashoffset: 25;
animation: pie1 4s ease both;
}
.pie1 {
stroke:pink;
stroke-dasharray: 40,60,0,0;
}
.pie2 {
stroke: green;
stroke-dasharray: 0,40,30,30;
}
.pie3 {
stroke: aqua;
stroke-dasharray: 0,70,30,0;
}
.label {
font: 3px sans-serif;
text-anchor: middle;
}<body>
<figure>
<svg id="chart" class="chart" viewBox="0 0 63.6619772368 63.6619772368">
<circle class="pie1" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
<circle class="pie2" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
<circle class="pie3" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
</svg>
</figure>
</body>BTW，这种用于制作饼图的方法大多数时候都有效。并且可能适合您的情况。但通常不建议这样做。一些浏览器在渲染以这种方式绘制的圆圈时遇到麻烦。您可能要考虑切换到绘制适当的圆形扇区。