Menggunakan d3 v5.15.0

Saya sedang membangun diagram lingkaran, di mana saya ingin menggunakan garis atau persegi panjang untuk mengisi nilainya, (atau meratakan lengkungan agar tampak seperti ini mungkin?). Saat ini saya dapat menggunakan busur untuk mengisinya.

Gambar yang dihapus.

import * as d3 from "d3";

const startAngle = (-40 * Math.PI) / 180;
const endAngle = (-40 * Math.PI) / 180 + 2 * Math.PI;
const width = 500;
const height = Math.min(width, 500);

function drawBenefitsValues(svg, data, startArc) {
  const radius = Math.min(width, height) / 2;
  const degreesToRadians = degrees => degrees * 0.0174533;
  const innerFactor = startArc;
  const outerFactor = value => innerFactor + value * 0.0509;
  const slice = degreesToRadians(30);

  // TODO - Is there a way to draw the path with a calculated arc and avoid the forEach?
  data.forEach((ele, idx) => {
    const id = `gBenefits${idx}`;
    const color =
      ele.benefits > 4.75
        ? "#999A57"
        : ele.benefits > 3.33
        ? "#E2B465"
        : ele.benefits > 2
        ? "#E2B465"
        : "#D3665D";
    const angleBegins = startAngle + idx * slice;
    const gridPie = d3
      .pie()
      .startAngle(angleBegins + 0.05)
      .endAngle(angleBegins + slice)
      .padAngle(0.05)
      .sort(null)
      .value(1);

    const arc = d3
      .arc()
      .innerRadius(radius * innerFactor + 1)
      .outerRadius(radius * outerFactor(ele.benefits))
      .padRadius(radius * 2.5)

    svg
      .append("g")
      .attr("id", id)
      .selectAll(`#${id}`)
      .data(gridPie([ele]))
      .join("path")
      .attr("d", arc)
      .attr("class", "benefits")
      .attr("fill", color);
  });
}
1
Carlos_Lantigua 13 Maret 2020, 22:52

1 menjawab

Jawaban Terbaik

Teman membantu saya menemukan semacam solusi peretasan. Pada dasarnya saya mengatur sudut awal dan akhir busur menjadi sama. Hal ini tentu saja akan menyebabkan elemen tersebut menghilang karena tidak ada lagi lengkungan, hanya garis lurus. Saya kemudian menambahkan goresan bersama dengan lebar goresan untuk membuat semacam persegi panjang keluar dari lengkungan.

const arc = d3
      .arc()
      .innerRadius(radius * outerFactor(ele.overuses))
      .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);
1
LTFoReal 16 Maret 2020, 19:33