D3 добавить штрих только к стороне пути - PullRequest
Новая
       3

D3 добавить штрих только к стороне пути

2 голосов
/ 17 марта 2020

Я создаю путь, который следует за аркой вдоль кольцевой диаграммы. Это рендеринг 12 путей, которые составляют весь мой пончик. Я пытаюсь выяснить, как сделать удар только по левой и правой стороне каждого пути. Один из моих путей выглядит следующим образом (остальные на этом l oop сидят рядом с ним). 

<path stroke-width="0.4" fill="none" d="M-124.0972400982391,-124.09724009823911A175.50000000000003,175.50000000000003,0,0,1,45.422742415492394,-169.51998251373152L42.705142441915925,-159.37776133769628A165,165,0,0,0,-116.67261889578033,-116.67261889578035Z" stroke="#EAEDED"></path>

в d3 это выглядит как 

const radius = Math.min(width, height) / 2;
  const graph = new Array(6).fill(1); // 6 equal sections

  const gridPie = d3
    .pie()
    .startAngle(startAngle)
    .endAngle(endAngle)
    .sort(null)
    .value(d => d);

  const arc = d3
    .arc()
    .innerRadius(radius * innerFactor)
    .outerRadius(radius * outerFactor);

  svg
    .append("g")
    .selectAll("path")
    .data(gridPie(graph))
    .join("path")
    .attr("stroke-width", 0.4)
    .attr("fill", "none")
    .attr("d", arc)
    .attr("stroke", "#EAEDED")
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
enter image description here

Вот коды и ящик для проекта, над которым я работаю. Данная область находится в строке 84 колеса. js файл. https://codesandbox.io/s/pedantic-haze-rzpz2?fontsize=14&hidenavigation=1&theme=dark

1 Ответ

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

В итоге я решил эту проблему, удалив обводку с пути и добавив линии к концам моих дуг. В моем случае мне нужно было, чтобы каждая вторая линия была светлее, так что в этом и состоит тройка. Я использовал метод данных, чтобы определить, какой из них будет светлым, если он будет 0 или жирным шрифтом, если он будет 1. 

svg
.selectAll(".grid")
// border lines, 1 = dark border, 0 = light border
.data(gridPie([1, 0, 1, 0, 1, 0]))
.append("line")
.attr("x1", 0)
.attr("y1", 0)
.attr(
  "y2",
  d =>
    Math.sin(d.startAngle - Math.PI / 2) *
    (radius - (d.data === 1 ? 0 : 75.5))
)
.attr(
  "x2",
  d =>
    Math.cos(d.startAngle - Math.PI / 2) *
    (radius - (d.data === 1 ? 0 : 75.5))
)
.attr("stroke", d => (d.data === 0 ? "#C8C8C8" : "#000"))
.attr("stroke-width", "0.1");
...