D3 Углы обводки круглого пути - PullRequest
Новая
       5

D3 Углы обводки круглого пути

0 голосов
/ 31 марта 2020

У меня есть кольцевая диаграмма, где я использую путь с шириной штриха для отображения данных. В настоящее время это просто путь, идущий вверх и вниз с достаточно толстой шириной обводки, чтобы он выглядел как прямоугольник. Есть ли способ для меня, чтобы слегка закруглить углы удара? До настоящего времени штрих-линейный колпачок и штрих-линейное соединение только превращают конец штриха в большой круг, что намного больше, чем мне нужно. Я просто хочу, чтобы края не были такими острыми, чтобы я мог это сделать? 

// D3 code I used to create this
function drawBenefitsValues(svg, data, startArc ) {
  // data is an array that looks like [3, 3, 5, 6, 1, 2]
  const radius = Math.min(width, height) / 2;
  const degreesToRadians = degrees => degrees * 0.0174533;
  const innerFactor = startArc;
  const outerFactor = value => innerFactor + value * 0.04;
  const slice = degreesToRadians(30);

  data.forEach((ele, idx) => {
    const id = `gBenefits${idx}`;
    const color =
      ele.benefits > 4.5
        ? colors.green 
        : ele.benefits > 2.75
        ? colors.yellow 
        : ele.benefits < 2.75
        ? colors.red
        : colors.yellow;
        
    const angleBegins = startAngle + idx * slice;
    const gridPie = d3
      .pie()
      .startAngle(angleBegins + 0.26)
      .endAngle(angleBegins)
      .sort(null)
      .value(1);

    const arc = d3
      .arc()
      .innerRadius(radius * outerFactor(ele.benefits))
      .startAngle(d => d.startAngle)
      .outerRadius(radius * innerFactor)
      .endAngle(d => d.startAngle);

    svg
      .append("g")
      .attr("id", id)
      .selectAll(`#${id}`)
      .data(gridPie([ele]))
      .join("path")
      .attr("class", "benefits")
      .attr("fill", color)
      .attr("d", arc)
      .attr("stroke-width", "18")
      .attr("stroke", color)
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<body>
  <svg viewBox="-250,-250,500,500">
    <g id="gBenefits0"><path class="benefits" fill="#E2B465" d="M-80.24920084088171,-138.41988933820105L-57.67911310438373,-99.489295461832Z" stroke-width="18" stroke="#E2B465"></path></g>
<g id="gBenefits1"><path class="benefits" fill="#999A57" d="M-0.2968618004224759,-164.99973294848522L-0.2069036790823317,-114.99981387318667Z" stroke-width="18" stroke="#999A57"></path></g>
  </svg>
</body>

enter image description here

Код песочницы ссылка. Код можно найти в колесе. js строка 128 https://codesandbox.io/s/determined-keldysh-57nnd?fontsize=14&hidenavigation=1&theme=dark

...