d3.js throwing Error: Invalid value for <g> attribute transform="null" on transition()

d3.js, null, rotation, transform, transition

Solution

The problem is that there's no initial `transform` attribute set to use as a start for the transition. This is what the error message means. To fix, simply add an initial rotation:

d3.selectAll(".dialGroup")
 .attr("transform", "rotate(0)")
 .transition()
 .duration(1000)        
 .attr("transform", "rotate(" + dialAngle + ")");

Problem

i'm using d3.v2.js 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 ``` 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 + ")"); } ``` I'm calling createDialIndicator() on initial render and updateDialIndicator() to change the dial to point to the component I click. The issue is: d3 is throwing following error in createDialIndicator() on rotate but not in updateDialIndicator(). May I know what would be the issue? Error: Invalid value for attribute transform="null"

Original source