title: Driving a D3 chart with and without d3.json()
body: <p>I have a piece of code that creates a donut (i.e., d3.layout.pie()).</p>
  
  <p>I used to load JSON data in the following way</p>
  
  <pre><code>d3.json(jsonFilePath,
      function(json) {
               //logic
               ....
              })
  </code></pre>
  
  <p>My visualizations are interactive (i.e., the donut variates in size, both innerRadius and "d" attribute). So I correctly implemented the three cases, enter, remove and update and the attrTween function to transition the "d" attribute. </p>
  
  <p>It worked until now. I decided to implement some sort of caching mechanism (i.e., I've a variable that holds the data so that data are pre-fetched once and re-used if needed again). I tested the behavior of my cache and it's working. <strong>Here's a snippet...</strong></p>
  
  <pre><code>if(cache[name] == undefined) {
      console.log('Loading data and create viz');
  
      // Loading all the JSONs for this name
      var remaining = revs.length; 
      // revs is an array w/ json file names to load (elements in the form r1, r4 etc.)
  
      var current = {};
  
      for (var i in revs) {
          d3.json(revs[i] + ".json" , function(json) {
  
              current["r"+json.revision] = json;
  
              if (!--remaining) {
                  // Data loaded, here, hence setting cache
                  cache[appName] = current;
                  createViz(rev);
              }
          }); 
      }
  }
  </code></pre>
  
  <p>I come to the point. I replaced the way I used to load data with a simple access  of my cache data containing the loaded JSON string, so now instead of the above code block I've something that looks like </p>
  
  <pre><code>var currentCache = cache[someName];
  var json = currentCache[revisionName];
  </code></pre>
  
  <p>When I inspect the json variable the json is correcty loaded and looks fine. The point is that now the transition is no longer working and I got lot of messages such as</p>
  
  <pre><code>Error: Problem parsing d="M2.1431318985078682e-14,-350A350,350 0 1,1 NaN,NaNLNaN,NaNA230.68565589945686,230.68565589945686 0 1,0 1.412542250532388e-14,-230.68565589945686Z"
  </code></pre>
  
  <p>I already faced this messages  before, but now the thing is that I dunno why this is happening. The code is unchanged, instead of using d3.json() I'm using the json string from a variable. Any suggestion?</p>
  
  <p>I attach part of the code for reference...</p>
  
  <pre><code>// An array of objects such as {"name" : myObject, "calls" : 23}
  var calls = json.children;
  
  var donut = d3.layout.pie()
      .value(function(d) { return d.calls; })
      .sort(null)
  
  var arcs = d3.select("#vizGroup")
      .selectAll(".callSlice")
      .data(donut(calls));
  
  //update
  arcs
      .data(donut(calls))
      .transition()
      .duration(750)
      .attrTween("d", arcTween)
      .style("fill", function(d) { return somecolor(d.data.name); } )
  
  
  //enter
  arcs.enter()
      .append("svg:path")
      .style("fill", function(d) { return somecolor(d.data.name); } )
      .attr("stroke", "#EEF")
      .attr('class', 'callSlice')
      .each(function(d) { this._current = d; })
      .transition()
      .duration(750)
      .attrTween("d", arcTween)
  
  
  //remove
  arcs.exit().remove();
  
  function arcTween(a) {
      a.innerRadius = myScale(myVariable);
  
      var i = d3.interpolate({
          startAngle: this._current.startAngle, 
          endAngle: this._current.endAngle,
          innerRadius: this._current.innerRadius}, a);
  
      this._current = i(0);
  
      return function(t) {
          return arc(i(t));
      };
  }
  </code></pre>