Question

我尝试绘制他们的起点具有弧的中心坐标的线。我使用了函数arc.centroid（d）。但返回的值仅在控制台中显示＆＃34; console.log＆＃34;以及显示未捕获的ReferenceError：x1未定义的错误消息。我需要你的帮助。

        <!DOCTYPE html>
          <html>
             <head>
         <h1>  test </h1>
      <script src="http://d3js.org/d3.v3.min.js"></script> 

        </head>
       <body>
     <script>


     var dataset = [ 5, 10, 20, 45, 6, 25 ];
      var pie = d3.layout.pie();
       pie(dataset);
     var w = 300;
      var h = 300;
         var outerRadius = w / 2;
     var innerRadius = w/3;
     var arc = d3.svg.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius);


   var color = d3.scale.category10();

   //Create SVG element
  var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
     //Set up groups
     var arcs = svg.selectAll("g.arc")
          .data(pie(dataset))
          .enter()
          .append("g")
          .attr("class", "arc")
          .attr("transform", "translate(" + outerRadius + ", " + outerRadius + ")");
     //Draw arc paths
     arcs.append("path")
        .attr("fill", function(d, i) {
           return color(i);
       })
        .attr("d", arc);
     //text 
   arcs.append("text")
    .attr("transform", function(d) {
     return "translate(" + arc.centroid(d) + ")";
         })
     .attr("text-anchor", "middle")
     .text(function(d) {
    return d.value;
          });
         // line 

          var linesAttributes = arcs.selectAll("line")
                      .data(pie(dataset))
                      .enter()
                      .append("svg:line")

                      .attr("x1", function(d) { console.log(d);

                                              var b = arc.centroid(d)[0];
                                             var c = arc.centroid(d)[1];

                                               console.log(b);

                                                  return arc.centroid(d)[0];})
                      .attr("y1", function(d) { console.log(d);
                                                     var b = arc.centroid(d)[0];
                                             var c = arc.centroid(d)[1];


                                               console.log(c);
                                                  return c;}
                                             )
                      .attr("x2", function(d,i) { return x1 + 100 ;}) 
                      .attr("y2", function(d,i) { return y1 + 100;}) 
                      .attr("class", "line") 

                      .style("stroke", function (d) {return color(d.data) ; })
                      .style("stroke-width", "3px");



                             </script>
                               </body>
                             </html>

控制台的结果是饼图弧的每个中心的坐标以及显示x1未定义的错误消息！如果显示其值，为什么没有定义!!!

对象{数据：25，值：25，startAngle：2.547237286694427，endAngle：3.962369112635775} 124.19981595246274 对象{数据：6，值：6，startAngle：5.660527303765393，endAngle：6.000158941991317} -112.4009018619796 ...... 未捕获的ReferenceError：x1未定义LastEssay.html:76

质心功能仅在控制台中有效

0 个答案: