Using a conditional statement to draw polylines in d3.js
<p>Currently drawing have a piechart made in d3, and want to add a set of polylines to each arc that will extrude out of each arc at a certain angle depending on where the arc lies. </p>

<pre><code>&lt;!doctype HTML&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Page Title&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;

        &lt;script type="text/javascript" src="js/d3.min.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;

    &lt;/head&gt;
    &lt;body&gt;

        &lt;script type="text/javascript"&gt;

 //=========================================================================================================================================
 // 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&lt;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] &lt; 0 )
                        ? (bigArcMaker.centroid(d)[0] - 160) : (bigArcMaker.centroid(d)[0] + 160) + ',' +
                          bigArcMaker.centroid(d)[1]


                  })
                  .attr("fill", "#ccc")
                  .attr("stroke", sColor)      
            }
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I have the polylines being appending to my svg when I use the inspect element in chrome but they arent showing up, they have no points. This leads me to believe its something to do with my conditional statement, is there something I'm not seeing? I'm new to d3 and javascript so its possible I just wrote the entire conditional statement wrong.</p>