Установка границы для внутреннего радиуса дуги D3

Question

Я пытаюсь реализовать диаграмму солнечных лучей, используя дугу D3.

var arc = d3.svg.arc()
        .startAngle(function (d) {
            return Math.max(0, Math.min(2 * Math.PI, x(d.x)));
        })
        .endAngle(function (d) {
            return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx)));
        })
        .innerRadius(function (d) {
            return isLevelOne ? 200 : Math.max(0, y(d.y));
        })
        .outerRadius(function (d) {
            return 300;
        });

    var g = svg.selectAll("path")
        .data(partition.nodes(this.props.data))
        .enter().append("g");

    var path = g.append("path")
        .attr("d", arc)
        .style("fill", function (d) {
            return '#' + d.color;
        })
        .style("stroke", "#ffffff")
        .style("stroke-width", function (d) {
            return d.image ? '0px' : '1px';
        })

        .attr("opacity", function (d) {
            return d.name === '' || !d.children ? 0 : 1;
        })
        .style("display", function (d) {
            return d.name === '' || !d.children ? 'none' : 'block';
        })
        .attr('class', style.rect)
        .on("click", click)
        .on("mousemove", function (d) {
            if (d.name) {
                tooltip
                    .style("left", d3.event.pageX + 50 + "px")
                    .style("top", d3.event.pageY - 70 + "px")
                    .style("display", "inline-block")
                    .html(!d.children ? '<span class="' + style.head + '">' + d.name + ': </span><span>' + d.description + '</span>' : '<span class="' + style.head + '">' + d.name + ': </span><span>' + d.fullName + '</span><br><span class="' + style.head + '">Budget: </span><span>' + numberToCurrencyFormatter(d.size.budget, 0) + '</span><br><span class="' + style.head + '"> Expense: </span><span>' + numberToCurrencyFormatter(d.size.expense, 0) + '</span>');
            }
        })
        .on("mouseout", function (d) { tooltip.style("display", "none"); });

    var text = g.append("text")
        .filter(filter_min_arc_size_text)
        .attr("transform", function (d) {
            return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")";
        })
        .attr("text-anchor", "middle")
        .attr("dx", "0") // margin
        .attr("dy", ".35em") // vertical-align

        .style("font-size", "15px")
        .style("display", function (d) {
            return d.name === '' || !d.children ? 'none' : 'block';
        })
        .style("fill", "#ffffff")
        .on("click", click)
        .style("cursor", "pointer")
        .on("mousemove", function (d) {
            if (d.name) {
                tooltip
                    .style("left", d3.event.pageX + 50 + "px")
                    .style("top", d3.event.pageY - 70 + "px")
                    .style("display", "inline-block")
                    .html(!d.children ? '<span class="' + style.head + '">' + d.name + ': </span><span>' + d.description + '</span>' : '<span class="' + style.head + '">' + d.name + ': </span><span>' + d.fullName + '</span><br><span class="' + style.head + '">Budget: </span><span>' + numberToCurrencyFormatter(d.size.budget, 0) + '</span><br><span class="' + style.head + '"> Expense: </span><span>' + numberToCurrencyFormatter(d.size.expense, 0) + '</span>');
            }

        })
        .on("mouseout", function (d) { tooltip.style("display", "none"); })

    g.append("svg:image")
        .attr("transform", function (d) {
            return "translate(" + arc.centroid(d) + ")rotate(" + computeImageRotation(d) + ")";
        })
        .attr("text-anchor", "middle")
        .attr("dx", "0") // margin
        .attr("dy", ".35em") // vertical-align
        .attr('width', 156)
        .attr('height', 156)
        .style("display", 'none')
        .attr("opacity", 0)
        .attr('class', style.rect)
        .on("click", imageClick)
        .attr("xlink:href", function (d) {
            return d.image ? d.image : '';
        });

и вот что я получаю.

Но мне нужно выделить внутренний круг, применив рамку.

Я попытался добавить штрих к path. Но это приводит к образованию границы вокруг кусочков солнечных лучей. Не только внутренний радиус.

Прикрепление полученного изображения ниже.

Моя цель - создать границу только вокруг внутреннего круга. Это ожидаемый результат.