D3.js如何使线条不进入圆环图的圆弧 [英] D3.js how to make the lines not go inside the arc of a donut chart

问题描述

我想根据此

但是，我不想让线条进入内部弧的面积。我只是想让他们触摸圆弧的圆周而不输入。

D3.js提供任何现成的功能，找出圆弧圆周的中心或有任何其他方式使用SVG来修改行。

解决方案

可能最简单的方法是重新排列元素的顺序。因为SVG元素将以文档顺序绘制，所以它将影响元素被呈现在他们成功的其他元素的顶部上。该示例使用三组来排列切片，文本标签和线条。

  svg.append（g）。attr（class，slices）; // 1. 
 svg.append（g）。attr（class，labels）; // 2. 
 svg.append（g）。attr（class，lines）; // 3. 
  

通过将< g> 为切片到底，这将覆盖部分线给出的外观像他们结束在切片的外弧。

  svg.append（g）。attr（class，labels）; // 2. 
 svg.append（g）。attr（class，lines）; // 3. 
 svg.append（g）。attr（class，slices）; // 1. 
  

不需要进一步调整。请查看此工作示例。

I want to make a donut chart with text labels as per this example:

However, I dont want the lines to enter into the inner area of the arc. I just want them to touch the circumference of the arc without entering it.

Does D3.js provide any ready made functions to find out the center of the arc circumference or is there any other way using SVG to modify the lines.

解决方案

Probably the easiest way will be to rearrange the order of the elements. Because SVGs elements will be drawn in document order this will have the effect of elements being rendered on top of other elements which they succeed. The example uses three groups to arrange the slices, the text labels and the lines.

svg.append("g").attr("class", "slices");   // 1.
svg.append("g").attr("class", "labels");   // 2.
svg.append("g").attr("class", "lines");    // 3.

By putting the <g> for the slices to the end this will cover part of the lines giving the look like they ended on the outer arc of the slices.

svg.append("g").attr("class", "labels");   // 2.
svg.append("g").attr("class", "lines");    // 3.
svg.append("g").attr("class", "slices");   // 1.

There is no need for further adjustements. Have a look at this working example.

这篇关于D3.js如何使线条不进入圆环图的圆弧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！