Question

我正在努力实现两件事：

使我的应用程序中的现有饼图填充可用的SVG 元素呈现在。
使SVG元素填充其所在的包含div的大小所以它很敏感。

在我的条形图中，我通过在X和Y刻度上设置ScaleLinear和ScaleBand范围来实现这一点，但这似乎不是饼图中的一个选项（然后将SVG元素设置为高度和宽度） 100％）。

代码：

export default Component.extend({

  tagName: 'svg',

   attributeBindings: ['width, height'],
   classNameBindings: ['baseClass'],

   a: null,
   baseClass: 'pie-chart',
   color: null,
   data: null,
   labelArc: null,
   height: 400,
   radius: null,
   svg: null,
   width: 400,
   donutwidth: 75,

setSvg() {
     const {
       height,
       baseClass,
       width,
     } = this.getProperties(
       'height',
       'baseClass',
       'width'
     );
     const svg = select(`.${baseClass}`)
       .attr('width', width)
       .attr('height', height)
       .append('g')

       .attr('transform', `translate(${width/2}, ${height/2})`);

     this.set('svg', svg);
   },

   _setG(svg, p) {
     return svg.selectAll('arc')
       .data(p)
       .enter()
       .append('g')
       .attr('class', 'arc');
   },

   _setPie(data) {
     const p = pie().padAngle(0.02).value((d) => d.count)(data);

     return p;
   },

// Template
<svg width='100%' height='100%'></svg>

感谢任何帮助

Answer 1

我发现我需要设置初始边距以填充SVG，然后使用可用的svgWidth数据计算饼图元素的最大值和最小值

cv::calibrateCamera()

扩展D3饼图以填充SVG

1 个答案: