使用条件语句在d3.js中绘制折线

时间:2016-03-06 13:13:28

标签: javascript d3.js polyline

目前,绘图在d3中有一个饼图,并且想要为每个弧添加一组折线,这些折线将根据弧所在的位置以某个角度从每个弧中挤出。

<!doctype HTML>
<html>
    <head>
        <title>Page Title</title>
        <meta charset="UTF-8">

        <script type="text/javascript" src="js/d3.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css">

    </head>
    <body>

        <script type="text/javascript">

 //=========================================================================================================================================
 // initializing variables 


            var data = []; // empty array to hold the objects imported from the JSON file
            var oRadius = 300; //var holding value for the outer radius of the arc
            var iRadius = 80;  //var holding the value for the inner radius of the arc
            var cRadius = 3;   //var holding the value for the corner radius of the arc
            var colors = d3.scale.category20b();//built in D3 function to color pieces of data
            var width = 1400; //setting the width of the svg
            var height = 1000; //setting the height of the svg
            var dRadius = 5; //setting the radius for the dots
            var sColor = "white"; // color for the stroke of the arcs
            var dStrokeColor = "#666";
            var dFillColor  = "#ccc"


            var lineMaker = d3.svg.line().x(function(d) { return d.x; }).y(function(d) { return d.y; }).interpolate("linear");

            var myArcMaker= d3.svg.arc().outerRadius(oRadius).innerRadius(iRadius).cornerRadius(cRadius); //var that creates the arc

            var bigArcMaker=  d3.svg.arc().outerRadius(400).innerRadius(oRadius).cornerRadius(cRadius);

            var  mySvg =  d3.select('body')
                          .append('svg')
                          .attr('width', width)
                          .attr("height", height) //selecting the body and appending an, then svg setting the height and width properties for the svg
                          .append("g")
                          .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")// centers the pie chart in the center of the svg


                           mySvg.append("g")
                           .attr("class", "slices");
                           mySvg.append("g")
                           .attr("class", "dots");
                            mySvg.append("g")
                           .attr("class", "lines");
                            mySvg.append("g")
                           .attr("class", "polyLines");



            var myPie =  d3.layout.pie()
                        .sort(null)
                        .startAngle(2*(Math.PI))
                        .endAngle(((Math.PI))/360)
                        .padAngle(-1.5*(2*(Math.PI))/360).value(function(d){return d.value}); //setting the values for that start angle, end angle and pad angle for the arcs and takes in the the values from the objects in the data array

//======================================================================================================================================================


                 d3.json("data.json", function (json) // importing the json file
                {

                    data = json; // setting the empty data array equal to the values of the objects in the json file
                    visual(); // this function holds all the d3 code to create the arc

                })



//======================================================================================================================================================

            function visual() // this function prevents the code that creates the arc from running before the objects from the json file are added into the empty data array
            {

              //  console.log(data); // checking to see if the objects are loaded into the data ray using the console in chrome








                var slice = mySvg.select(".slices")
                  .selectAll("path.slice")
                  .data(myPie(data)) // 
                  .enter()
                  .append("path")
                  .attr("class", "slice")
                  .attr("d", function(d) {
                    return myArcMaker(d)
                  })
                  .attr("fill", function(d, i) {
                    return colors(i);
                  }) //using the d3 color brewer to color each arc
                  .attr("stroke", "white") //giving each arc a stroke of white

                var dots = mySvg.select("g.dots")
                  .selectAll("cirlces")
                  .data(myPie(data))
                  .enter()
                  .append("circle")
                  .attr("class", "g.dots")
                  .attr("transform", function(d)
                  {
                    return "translate(" + myArcMaker.centroid(d) + ")"; 
                  })
                  .attr("r", dRadius)
                  .attr("fill", dFillColor)
                  .attr("stroke", sColor)
//                
                var lines = mySvg.select(".lines")
                  .selectAll("path.lines")
                  .data(myPie(data)) // 
                  .enter()
                  .append("path")
                  .attr("class", "lines")
                  .attr("d", function(d) {
                    return bigArcMaker(d)
                  }).attr("fill", "none")
                  .attr("stroke", "white")


                var outerDots =  mySvg.select("g.dots")
                  .selectAll("cirlces")
                  .data(myPie(data))
                  .enter()
                  .append("circle")
                  .attr("class", "g.dots")
                  .attr("transform", function(d)
                  {
                    return "translate(" + bigArcMaker.centroid(d) + ")"; 
                  })
                  .attr("r", dRadius)
                  .attr("fill", dFillColor)
                  .attr("stroke", sColor)





//                    var x1 = myArcMaker.centroid(d)[0];
//                    var y1 = myArcMaker.centroid(d)[1];
//                    var x2 = bigArcMaker.centroid(d)[0];
//                    var y2 = bigArcMaker.centroid(d)[1];
//                    var x3 = function(d){if(x2<0){return bigArcMaker.centroid(d)[0]-160}}

//                    var lineData = [{'x': x1},
//                                   ]


                   var polyLines =  mySvg.select(".polyLines")
                  .selectAll("polylines")
                  .data(data)
                  .enter()
                  .append("polyline")
                  .attr("class", "polyLines")
                  .attr("points", function(d)
                  {
                      return
                            myArcMaker.centroid(d)[0] + ',' + myArcMaker.centroid(d)[1] + ','
                            + bigArcMaker.centroid(d)[0] + ',' + bigArcMaker.centroid(d)[1] + ','+

                          (bigArcMaker.centroid(d)[0] < 0 )
                        ? (bigArcMaker.centroid(d)[0] - 160) : (bigArcMaker.centroid(d)[0] + 160) + ',' +
                          bigArcMaker.centroid(d)[1]


                  })
                  .attr("fill", "#ccc")
                  .attr("stroke", sColor)      
            }
        </script>
    </body>
</html>

当我在chrome中使用inspect元素时,我将折线附加到我的svg但它们没有显示,它们没有点。这让我相信它与我的条件陈述有关,是否有一些我没有看到的东西?我是d3和javascript的新手,所以我可能只是写了整个条件语句错误。

1 个答案:

答案 0 :(得分:0)

夫妻俩。

1。)生成折线时,您忘记在数据绑定中“拼凑”数据。

2。)由于字符串连接,你的条件会在某处丢失。我建议你把它重写成可读的东西:

.attr("points", function(d) {

      var p = "";
      p += myArcMaker.centroid(d)[0] + ',' + myArcMaker.centroid(d)[1] + ',' + bigArcMaker.centroid(d)[0] + ',' + bigArcMaker.centroid(d)[1] + ',';
      p += bigArcMaker.centroid(d)[0] < 0 ? bigArcMaker.centroid(d)[0] - 160 : bigArcMaker.centroid(d)[0] + 160;
      p +=  ',' + bigArcMaker.centroid(d)[1];
      return p;

    })

工作代码:

<!DOCTYPE html>
<html>

  <head>
    <title>Page Title</title>
    <meta charset="UTF-8" />
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  </head>

  <body>
    <script type="text/javascript">
    //=========================================================================================================================================
    // initializing variables 


    var data = []; // empty array to hold the objects imported from the JSON file
    var oRadius = 300; //var holding value for the outer radius of the arc
    var iRadius = 80; //var holding the value for the inner radius of the arc
    var cRadius = 3; //var holding the value for the corner radius of the arc
    var colors = d3.scale.category20b(); //built in D3 function to color pieces of data
    var width = 1400; //setting the width of the svg
    var height = 1000; //setting the height of the svg
    var dRadius = 5; //setting the radius for the dots
    var sColor = "white"; // color for the stroke of the arcs
    var dStrokeColor = "#666";
    var dFillColor = "#ccc"


    var lineMaker = d3.svg.line().x(function(d) {
      return d.x;
    }).y(function(d) {
      return d.y;
    }).interpolate("linear");

    var myArcMaker = d3.svg.arc().outerRadius(oRadius).innerRadius(iRadius).cornerRadius(cRadius); //var that creates the arc

    var bigArcMaker = d3.svg.arc().outerRadius(400).innerRadius(oRadius).cornerRadius(cRadius);

    var mySvg = d3.select('body')
      .append('svg')
      .attr('width', width)
      .attr("height", height) //selecting the body and appending an, then svg setting the height and width properties for the svg
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") // centers the pie chart in the center of the svg


    mySvg.append("g")
      .attr("class", "slices");
    mySvg.append("g")
      .attr("class", "dots");
    mySvg.append("g")
      .attr("class", "lines");
    mySvg.append("g")
      .attr("class", "polyLines");

    var myPie = d3.layout.pie()
      .sort(null)
      .startAngle(2 * (Math.PI))
      .endAngle(((Math.PI)) / 360)
      .padAngle(-1.5 * (2 * (Math.PI)) / 360).value(function(d) {
        return d.value
      }); //setting the values for that start angle, end angle and pad angle for the arcs and takes in the the values from the objects in the data array


    data= [{
      value: 10
    },{
      value: 20
    },{
      value: 30
    }];
    visual();
    

    //======================================================================================================================================================

    function visual() // this function prevents the code that creates the arc from running before the objects from the json file are added into the empty data array
    {
      var slice = mySvg.select(".slices")
        .selectAll("path.slice")
        .data(myPie(data)) // 
        .enter()
        .append("path")
        .attr("class", "slice")
        .attr("d", function(d) {
          return myArcMaker(d)
        })
        .attr("fill", function(d, i) {
          return colors(i);
        }) //using the d3 color brewer to color each arc
        .attr("stroke", "white") //giving each arc a stroke of white

      var dots = mySvg.select("g.dots")
        .selectAll("cirlces")
        .data(myPie(data))
        .enter()
        .append("circle")
        .attr("class", "g.dots")
        .attr("transform", function(d) {
          return "translate(" + myArcMaker.centroid(d) + ")";
        })
        .attr("r", dRadius)
        .attr("fill", dFillColor)
        .attr("stroke", sColor)
        //                
      var lines = mySvg.select(".lines")
        .selectAll("path.lines")
        .data(myPie(data)) // 
        .enter()
        .append("path")
        .attr("class", "lines")
        .attr("d", function(d) {
          return bigArcMaker(d)
        }).attr("fill", "none")
        .attr("stroke", "white")


      var outerDots = mySvg.select("g.dots")
        .selectAll("cirlces")
        .data(myPie(data))
        .enter()
        .append("circle")
        .attr("class", "g.dots")
        .attr("transform", function(d) {
          return "translate(" + bigArcMaker.centroid(d) + ")";
        })
        .attr("r", dRadius)
        .attr("fill", dFillColor)
        .attr("stroke", sColor)


      var polyLines = mySvg.select(".polyLines")
        .selectAll("polylines")
        .data(myPie(data))
        .enter()
        .append("polyline")
        .attr("class", "polyLines")
        .attr("points", function(d) {
          
          var p = "";
          p += myArcMaker.centroid(d)[0] + ',' + myArcMaker.centroid(d)[1] + ',' + bigArcMaker.centroid(d)[0] + ',' + bigArcMaker.centroid(d)[1] + ',';
          p += bigArcMaker.centroid(d)[0] < 0 ? bigArcMaker.centroid(d)[0] - 160 : bigArcMaker.centroid(d)[0] + 160;
          p +=  ',' + bigArcMaker.centroid(d)[1];
          return p;
          
        })
        .attr("fill", "#ccc")
        .attr("stroke", sColor)
    }
  </script>
  </body>

</html>