title: D3 nested selection with json: how to apply .force() to nested elements?
body: <p>(This is a follow-up question to the one asked <a href="https://stackoverflow.com/questions/16481570/how-to-link-extra-attributes-from-json-data-in-a-d3-js-force-layout">here</a>. The issue has not been resolved completely in that question, and this is kind of a continuation, so I post a new question)</p>
  
  <p>I have a nested json structure representing a tree, which looks something like this:</p>
  
  <pre><code> [{
     "name": "flare",
     "root": "true",
     "children": [
      {
       "name": "analytics",
       "nestedproperties": [
           { "attribute": "attribute1", 
             "type": "type1" },
           { "attribute": "attribute2", 
             "type": "type2" },
           { "attribute": "attribute3", 
             "type": "type3" }
       ],
       "children": [
        {
           "name": "cluster",
           "nestedproperties": [
               { "attribute": "attribute4", 
                 "type": "type4"},
               ....
           ]
        },
    ...
  </code></pre>
  
  <p>Besides displaying the normal tree structure with nodes and their children, I want to represent each element under  <code>nestedproperties</code> with circles that link to their parent node.  </p>
  
  <p>By following the answers to some other questions and other examples I managed to display each of the elements of <code>nestedproperties</code> by passing the nested data as argument to <code>.data()</code>,  as advised in <a href="https://stackoverflow.com/questions/14580604/d3-nested-selection-how-to-access-array-data">this question</a>. The  core part of the code looks like this:</p>
  
  <pre><code>  var pii = nodeEnter.selectAll("circle.pii")
         .data(function(d) {return d.nestedproperties; })
  
  
    var piiEnter = pii.enter().append("svg:g")
        .attr("class", "piinode")
        .attr("transform", "translate(50,50)") 
        //.attr("transform", function(d, i) { return "translate(" + d.x + "," + d.y + ")"; })    // &lt;&lt;--- I cannot call this function because d.x and d.y does not exist
        .call(forcepii.drag);
  
    // Append the circle for the node 
    piiEnter.append("svg:circle")
        .attr("class", "pii")
        .attr("r", 25)
        .style("fill", "blue")
        .style("stroke", "#999999")
  </code></pre>
  
  <p>The full code is in this <a href="http://jsfiddle.net/djjupa/n93Xw/2/" rel="nofollow noreferrer">jsfiddle</a>.</p>
  
  <p>The problem is that the circles representing the elements inside nestedproperties appear all on top of each other and cannot be dragged.  I don't understand how to apply <code>force.nodes()</code> to the nested elements or how to use the <code>transform</code> property on them to do the ticking.</p>
  
  <p>Trying the following tells me "Uncaught TypeError: Cannot set property 'index' of undefined " </p>
  
  <pre><code>   forcepii.nodes(function(d) { return d.nestedproperties; })
      //.links(links)
      .gravity(0.05)
      .charge(-1500)
      .linkDistance(100)
      .friction(0.5)
      .linkStrength(function(l, i) {return 1; })
      .size([w, h])
      //.on("tick", tick)
      .start();
  </code></pre>
  
  <p>Here is the resulting picture. As you can see the circles are drawn on top of each other and force is not being applied:</p>
  
  <p><img src="https://i.stack.imgur.com/TyHhs.png" alt="enter image description here"></p>
  
  <p>Thanks for any help!</p>