Pure SVG P ie диаграмма, текст выравнивать центр - PullRequest
Новая
       3

Pure SVG P ie диаграмма, текст выравнивать центр

0 голосов
/ 06 января 2020

Как разместить текст значения внутри каждой диаграммы p ie без каркаса d3. js.

Я пытался использовать некоторые javascript, чтобы получить ширину. Это значение по умолчанию 

getBBox()); // get the SVG width.

Я использую штрих-черточку, чтобы расширить пространство p ie.

Каким образом я могу получить правильный размер штрих-черточки из 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>

1 Ответ

1 голос
/ 06 января 2020

Вы не можете. 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>

Кстати, этот подход для построения графиков p ie работает большую часть времени. И может быть хорошо для вашего случая. Но в целом это не рекомендуется. В некоторых браузерах возникают проблемы при рендеринге кругов, нарисованных таким образом. Возможно, вы захотите перейти к рисованию правильных круговых секторов.

...