title: d3.js throwing Error: Invalid value for <g> attribute transform="null" on transition()
body: <p>i'm using <em>d3.v2.js</em> to render pie chart and a dial (in center) to point to the selected component of the pie. The code for dial is as below</p>
  
  <pre><code>function createDialIndicator(dialerData, subComponentId, subComponentsCount, group){
      var offsetAngle = (360/subComponentsCount)/2;
      var dialAngle = ((360/subComponentsCount)*(parseInt(subComponentId.charAt(subComponentId.length-1))))-offsetAngle;
      var dialGroup = group.append("g")
       .attr("class","dialGroup");
      dialGroup.append("path")
       .attr("class","dial")
       .attr("d",dialerData)
       .attr("fill","gold");
      d3.selectAll(".dialGroup")
       .transition()
       .duration(1000)        
       .attr("transform", "rotate(" + dialAngle + ")");
  }
  function updateDialIndicator(subComponentId, subComponentsCount){
      var offsetAngle = (360/subComponentsCount)/2;
      var dialAngle = ((360/subComponentsCount)*(parseInt(subComponentId.charAt(subComponentId.length-1))))-offsetAngle;
      d3.selectAll(".dialGroup")
       .transition()
       .duration(1000)
       .attr("transform", "rotate(" + dialAngle + ")");
  }
  </code></pre>
  
  <p>I'm calling createDialIndicator() on initial render and updateDialIndicator() to change the dial to point to the component I click.
  <strong>The issue is:</strong>
  d3 is throwing following error in createDialIndicator() on rotate but not in updateDialIndicator(). May I know what would be the issue?</p>
  
  <blockquote>
    <p>Error: Invalid value for  attribute transform="null"</p>
  </blockquote>