Question

我需要将我的圆环图表设为水平图形，如图所示<>

这是我用于其他圆环图的代码

<div class="parent">
  <div class="child-a"></div>
  <div class="child-b"></div>
</div>

<div>
  more content
</div>

我尝试弄乱attr值和弧值，但没有成功，任何想法如何处理这个？感谢

Answer 1

这不是甜甜圈图表的大部分，它现在是一个堆积的条形图（带有一个条形图）。 pie和arc助手对此没什么帮助，他们关心的是计算角度和圆形的东西;你现在正在处理矩形。 d3.stack可以提供帮助，但可能有点过分。这是我自己完成数学计算（即定位）的快速：

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
  </head>

  <body>
    <script>
    
      var width = 500,
          height = 200,
          w = 300,
          h = 100;
    
      var svg = d3.select('body')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

      var total = 0,
          l = 0,
          // fake random data
          raw = d3.range(5).map(function(d){
            var v = Math.random() * 10;
            total += v;
            return v;
          }),
          // calculate percents and cumulative position
          data = raw.map(function(d){
            var rv = {
              v: d,
              l: l,
              p: d/total
            }
            l += rv.p;
            return rv;
          });

      // scale and color
      var s = d3.scale.linear()
        .range([0, w])
        .domain([0, 1]),
        c = d3.scale.category20();

      svg.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr('x', function(d){
          return s(d.l) + width/2 - w/2; // place based on cumulative
        })
        .attr('width', function(d){
          return s(d.p); // width from scale
        })
        .attr('height', h)
        .attr('y', height/2 - h/2)
        .style('fill', function(d,i){
          return c(i);
        })
        .style('stroke', 'white')
        .style('stroke-width', '2px');
      
    </script>
  </body>

</html>

＆＃13;

将D3圆环图的角度更改为180

1 个答案: