title: D3: How to dynamically set the "d" attribute on a path element
body: <p>With every other attribute, you can set the value of it using the function(d){} method, however when I try to do that on the "d" attr of a path element, it gives me a huge red invalid value error in the console. My code is below. </p>
  
  <p><strong>Here's what I'm trying to accomplish (I'm struggling)</strong>
  I need to create a progress chart for each data element in my dataset. They all have different max values. 1 chart may need a max value of 4.5, while another may need a max value of 1.0. The way I'm going to try to go about it is have a function called every time a path is created and that function will get passed the max value which will then return the arc variable needed. Any suggestions?</p>
  
  <pre><code>var arc = d3.svg.arc()
                      .startAngle(0)
                      .endAngle(180 * (Math.PI / 180))
                      .innerRadius(50)
                      .outerRadius(100);
  
      // Create a variable to append the svg/paths too
      var container = d3.select("#aeGroupMarginSlide");
  
      // Create an svg element and append a path for each data element
      var svg = container.selectAll(".aeGroupMarginSvg").data(data);
      svg.enter()
          .append("svg")
              .attr({
                  "class": "col-sm-4 col-md-4 col-lg-4 aeGroupMarginSvg",
                  "height": 300
              })
          .append("path")  
              .attr({
                  "d": function (d) { return arc; },
                  "transform": function (d) {
                      var w = $(this).parent().width();
                      var h = $(this).parent().height();
                      return "translate(" + (w / 2) + ", " + (h / 2) + ")"
                  },
                  "fill": "white"
              })
  </code></pre>