attrTween. js: 5 Ошибка: <path>атрибут d: ожидаемый флаг ar c ('0' или '1')

Question

я использую библиотеку c3 js для создания графиков, меня попросили убрать метки из кругов с линией. И это результат first

, а при наведении курсора мыши это другой результат

second

это код

      const size = this.getSize();
      const width = size.width;
      const height = size.height;
      const radius = Math.min(width , height) / 2;

      d3.selectAll('#' + this.graphid + ' .c3-chart-arcs g text')
        .attr('text-anchor', 'middle')
        .attr('transform', 'translate(0,0)')
        .attr('x', d => {
            const a = d.startAngle + (d.endAngle - d.startAngle) / 2 - Math.PI / 2;
            d.cx = Math.cos(a) * (radius - 75);
            return d.x = Math.cos(a) * (radius - 20);
        })
        .attr('y', d =>  {
            const a = d.startAngle + (d.endAngle - d.startAngle) / 2 - Math.PI / 2;
            d.cy = Math.sin(a) * (radius - 75);
            return d.y = Math.sin(a) * (radius - 20);
        })
        .text( d => {
          return d.value;
        })
        .each(function(d) {
            const bbox = this.getBBox();
            d.sx = d.x - bbox.width / 2 - 2;
            d.ox = d.x + bbox.width / 2 + 2;
            d.sy = d.oy = d.y + 5;
        });

      d3.selectAll('#' + this.graphid + ' .c3-chart-arc g')
        .append('defs').append('marker')
        .attr('id', 'circ')
        .attr('markerWidth', 10)
        .attr('markerHeight', 10)
        .attr('refX', 3)
        .attr('refY', 3)
        .append('circle')
        .attr('cx', 3)
        .attr('cy', 3)
        .attr('r', 3);

      d3.selectAll('#' + this.graphid + ' .c3-chart-arc')
        .append('path')
        .attr('class', 'pointer')
        .style('fill', 'none')
        .style('stroke', 'black')
        .attr('marker-end', 'url(#circ)')
        .attr('d', function(d) {
            if (d.cx > d.ox) {
                return 'M' + d.sx + ',' + d.sy + 'L' + d.ox + ',' + d.oy + ' ' + d.cx + ',' + d.cy;
            } else {
                return 'M' + d.ox + ',' + d.oy + 'L' + d.sx + ',' + d.sy + ' ' + d.cx + ',' + d.cy;
            }
        });

Оригинальный график это https://c3js.org/samples/chart_pie.html Как вы можете видеть, когда вы передаете мышь, кусок становится больше и выглядит лучше.

Я заметил, что путь, который имеет по умолчанию для фигуры, и путь, который мы добавим позже, чтобы сделать линию равными в пути d

, это оригинальный код.

<g class="c3-chart-arc c3-target c3-target-Frescos">
<g class=" c3-shapes c3-shapes-Frescos c3-arcs c3-arcs-Frescos">
<path class=" c3-shape c3-shape c3-arc c3-arc-Frescos" transform="scale(1,1)" style="fill: rgb(239, 71, 111); cursor: pointer;" d="M1.3591849108253566,112.56679457716731A112.57499999999999,112.57499999999999,0,0,1,-93.12814709001732,-63.2477576249158L0,0Z">
</path>
<defs>
<marker id="circ" markerWidth="10" markerHeight="10" refX="3" refY="3">
<circle cx="3" cy="3" r="3"></circle>
</marker>
</defs>
</g>
<text dy=".35em" class="" transform="translate(0,0)" style="opacity: 1; text-anchor: middle; pointer-events: none;" text-anchor="middle" x="-99.53622350452113" y="53.493366041575804">66332.2</text>
<path class="pointer" marker-end="url(#circ)" d="M-121.14559850452113,58.493366041575804L-77.92684850452113,58.493366041575804 -51.089389055417925,27.456771950543335" style="fill: none; stroke: black;">
</path>
</g>

И это при наведении курсора.

<g class="c3-chart-arc c3-target c3-target-Frescos">
<g class=" c3-shapes c3-shapes-Frescos c3-arcs c3-arcs-Frescos">
<path class=" c3-shape c3-shape c3-arc c3-arc-Frescos" transform="" style="fill: rgb(239, 71, 111); cursor: pointer;" d="M1.3591849108253566,112.56679457716731A112.57499999999999,112.57499999999999,0,0,1,-93.12814709001732,-63.2477576249158L0,0Z"></path><defs><marker id="circ" markerWidth="10" markerHeight="10" refX="3" refY="3">
<circle cx="3" cy="3" r="3">
</circle>
</marker>
</defs>
</g>
<text dy=".35em" class="" transform="translate(0,0)" style="opacity: 1; text-anchor: middle; pointer-events: none;" text-anchor="middle" x="-99.53622350452113" y="53.493366041575804">66332.2</text>
<path class="pointer" marker-end="url(#circ)" d="M1.3591849108253566,112.56679457716731A112.57499999999999,112.57499999999999,0,0,1,-93.12814709001732,-63.2477576249158L0,0Z" style="fill: none; stroke: black;"></path></g>

Спасибо!