Question

＆＃13;

var data = ["4.11","4.11","4.11","4.11","4.11","4.11"];
    var radarCanvas = d3.select('#div_id')
          .append('svg')
          .attr('width','780')
          .attr('height','600')
          .attr('class', 'graph');

    var r = 78;
    var p = Math.PI * 2;



    var drawCircleLvl1 = radarCanvas.append('g')
          .attr('transform', 'translate(210,210)')
          .attr('fill', '#cdecfa');
    var drawCircleLvl2 = radarCanvas.append('g')
          .attr('transform', 'translate(210,210)')
          .attr('fill', '#b1def2');
    var drawCircleLvl3 = radarCanvas.append('g')
          .attr('transform', 'translate(210,210)')
          .attr('fill', '#93d3ed');
    var drawCircleLvl4 = radarCanvas.append('g')
          .attr('transform', 'translate(210,210)')
          .attr('fill', '#70c8e6');
    var favAreaArc = radarCanvas.append('g')
      .attr('transform', 'translate(210,210)')
      .attr('fill', '#CC9FC2')
      .attr('opacity', '.7');
    var cardinal = radarCanvas.append('g');

   
    for (var i = 0; i < data.length; i++) {
      var section = data[i];

      var drawArcLvl1 = d3.svg.arc()
          .innerRadius(r)
          .outerRadius(r+30)          .startAngle(startAngle(i+1,data.length))
          .endAngle(endAngle(i+1,data.length));
          
        

      var drawArcLvl2 = d3.svg.arc()
          .innerRadius(r+30)
          .outerRadius(r+60)
          .startAngle(startAngle(i+1,data.length))
          .endAngle(endAngle(i+1,data.length));
        

      var drawArcLvl3 = d3.svg.arc()
          .innerRadius(r+60)
          .outerRadius(r+90)
          .startAngle(startAngle(i+1,data.length))
          .endAngle(endAngle(i+1,data.length));
         

      var drawArcLvl4 = d3.svg.arc()
          .innerRadius(r+90)
          .outerRadius(r+120)
          .startAngle(startAngle(i+1,data.length))
          .endAngle(endAngle(i+1,data.length));
          
       


    drawCircleLvl1.append('path')
        .attr('d', drawArcLvl1);
    drawCircleLvl2.append('path')
        .attr('d', drawArcLvl2);
    drawCircleLvl3.append('path')
        .attr('d', drawArcLvl3);
    drawCircleLvl4.append('path')
        .attr('d', drawArcLvl4);

    }
   



    function startAngle(k,n) {
      return ((k-1)*Math.PI*2)/n;
    }
    function endAngle(k,n) {
      return (k*Math.PI*2)/n;
    }

    function middlePointX(k,n) {
      return (210 + Math.sin((2*k-1)*((2*Math.PI)/(2*n)))*(r+175));
    }

    function middlePointY(k,n) {
      return (210 - Math.cos((2*k-1)*((2*Math.PI)/(2*n)))*(r+175));
    }

    function scoreCX(k,n) {
      return (210 + Math.sin((2*k-1)*((2*Math.PI)/(2*n)))*((r-30)+(section.allObserversAverageScore*30)));
    }

    function scoreCY(k,n) {
      return (210 - Math.cos((2*k-1)*((2*Math.PI)/(2*n)))*((r-30)+(section.allObserversAverageScore*30)));
    }

    var svg = document.getElementsByTagName("svg")[0];
    var bbox = svg.getBBox();

    svg.setAttribute("viewBox", (bbox.x-10)+" "+(bbox.y-10)+" "+(bbox.width+20)+" "+(bbox.height+20));
    svg.setAttribute("width", (bbox.width+20)  + "px");
    svg.setAttribute("height",(bbox.height+20) + "px");

＆＃13;

tAngle(...).endAngle(...).padAngle is not a function",

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</head>

<body>
  <div id="div_id"></div>
</body>

</html>

＆＃13;

我设法编写了一些代码，使用动态数据集生成带有d3.js的弧。基本上我将圆的长度除以弧度，并且生成的弧具有相同的长度。我为每个切片使用了4组（级别）弧。有人可以给我一个想法或指出我应该采取的方向为每个弧生成自定义路径？正如您所看到的，example_1是我的结果，example_2是我想要的地方。所以我想修改第1和第4级弧的路径（在图像中表示为＆＃34; 1＆＃34;和＃34; 2＆＃34;）并使它们更圆。我试图修改边界半径，但在这种特殊情况下这并没有帮助。谢谢。

D3.js（v4）自定义弧（路径）生成

0 个答案: