D3 добавить линию или прямоугольник, чтобы заполнить значения диаграммы p ie - PullRequest
Новая
       3

D3 добавить линию или прямоугольник, чтобы заполнить значения диаграммы p ie

1 голос
/ 13 марта 2020

с использованием d3 v5.15.0

Я строю график ap ie, в котором я хочу использовать линию или прямоугольник для заполнения значения (или, возможно, выпрямить арку, чтобы она появилась таким образом ?). В настоящее время я могу использовать ar c, чтобы заполнить его.

Удаленные изображения. 

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 Ответ

1 голос
/ 16 марта 2020

друг помог мне придумать какое-то хакерское решение. В основном я установил start и endAngles ar c одинаковыми. Это, конечно, приведет к тому, что элемент исчезнет, ​​потому что больше нет арки, только прямая линия. Затем я добавил обводку вместе с шириной обводки, чтобы создать своего рода прямоугольник из арки. 

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