D3.js 饼图未显示所有弧线

Question

我已经开始学习 d3.js。我的主要目标是可缩放的旭日形图，但尝试学习整个库并使用它我正在尝试创建一个饼图。在饼图中，没有显示所有弧线。请指导。

CSS：

<style>
    

svg{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }
    </style>

HTML：

<svg style="width:300px;height:300px"></svg>

Javascript/Jquery：

<script src="https://d3js.org/d3.v6.min.js"></script>

<script>
        function pieChart() {
            const data = [{
                name: 'Chrome',
                value: 50
            }, {
                name: 'IE',
                value: 60
            }, {
                name: 'Opera',
                value: 30
            }, {
                name: 'Firefox',
                value: 40
                }];
            try {
                const svg = d3.select('svg'),
                    width = svg.attr('width'),
                    height = svg.attr('height');
                const radius = 150;
                const g = svg.append('g').attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
                const color = d3.scaleOrdinal(['green', 'gray', 'red', 'blue']);
                const pie = d3.pie().value(d => d.value);                    
                const path = d3.arc().outerRadius(radius).innerRadius(radius-120);
                const label = d3.arc().outerRadius(radius).innerRadius(radius - 10);
                const pies = g.selectAll('.arc').data(pie(data)).enter().append('g').attr('class', 'arc');
                pies.append('path').attr('d', path).attr('fill', d => color(d.data.value));
                pies.append('text').text(d => d.data.name).attr('transform', function (d) { return "translate("+label.centroid(d)+")"});
            }
            catch (ex) {
                alert(ex);
            }
        }
    </script>

Answer 1

修复了一些小错误并删除了 try/catch 块，看看它在小提琴中工作：

const data = [
  {
    name: 'Chrome',
    value: 50
  }, 
  {
    name: 'IE',
    value: 60
  }, 
  {
    name: 'Opera',
    value: 30
  }, 
  {
    name: 'Firefox',
    value: 40
  }
];

  const svg = d3.select('svg');
  const width = svg.attr('width');
  const height = svg.attr('height');
  const radius = 150;

  const g = svg.append('g')
    .attr("transform", `translate(${width / 2},${height / 2})`);
  
  const color = d3.scaleOrdinal(['green', 'gray', 'red', 'blue']);
  
  const pie = d3.pie()
    .value(d => d.value);                    
  
  const path = d3.arc()
    .outerRadius(radius)
    .innerRadius(radius-120);
 
 const label = d3.arc()
   .outerRadius(radius)
   .innerRadius(radius - 120);
  
const pies = g.selectAll('.arc')
  .data(pie(data))
  .enter()
  .append('g')
  .classed('arc', true);

pies.append('path')
  .attr('d', d => path(d))
  .attr('fill', d => color(d.data.value));
  
pies.append('text')
  .text(d => d.data.name)
  .attr('text-anchor', 'middle')
  .attr('transform', d => `translate(${label.centroid(d)})`);

<script src="https://d3js.org/d3.v6.min.js"></script>
<svg width="300" height="300" />