title: d3.js Tree - CSV Attributes to Nodes
body: <p>I'm trying to make a visual representation of a file I'm extracting as a csv.
  But I seem to be hitting a wall with the structure that d3 Tree expects.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script src="mydata.csv"&gt;&lt;/script&gt;
  &lt;script&gt;
    var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 800 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom;
  
    var canvas = d3.select("body").append("svg")
    .attr("width", 2000)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
    var tree = d3.layout.tree()
    .size([height, width]);
  
    var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });
  
  d3.csv("mydata.csv", function(data) {
  
      var nested_data = d3.nest()
        .key(function(d) { return d['Machine']; })
        .key(function(d) { return d['Name']; })
        .entries(data);
  
      flare_data.key = "Flare";
      flare_data.values = nested_data;
      flare_data = reSortFlare(flare_data); //Turns Key Values into Name Children which D3 Tree expects
  
    var nodes = tree.nodes(flare_data);
  
    var link = canvas.selectAll(".link")
      .data(tree.links(nodes))
      .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);
  
    var node = canvas.selectAll(".node")
      .data(nodes)
      .enter()
      .append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
  
    node.append("circle")
      .attr("r", 7);
  
    node.append("text")
      .attr("dx", function(d) { return d.children ? -15 : 15; })
      .attr("dy", 3)
    .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
  .text(function(d) { return d.children ? d.name : [d['URL Template'], d['xPath']]; });
    });
  
     function reSortFlare(root) {
       //console.log("Calling");
       for (var key in root) {
         if (key == "key") {
           root.name = root.key;
           delete root.key;
         }
         if (key == "values") {
           root.children = [];
           for (item in root.values) {
             root.children.push(reSortFlare(root.values[item]));
           }
           delete root.values;
         }
       }
       return root;
     }
  &lt;/script&gt;
  </code></pre>
  
  <p>My CSV file example:</p>
  
  <pre><code>Machine,Name,URL Template,Page Start,Page Size,Max 
  Pages,xPath,RegEx,eCommerce,Search Interval,Additional Variable,Variable Value
  "Machine [1]","eSearch - Web-GB","http://example.com/status","1","1","10","//somethingness","([0-9]{1,20})","1","0","Thum","true"
  "Machine [1]","eSearch - Web-GB","http://forexample.com/randomness","1","1","10","//nothingness","([0-9]{1,20})","1","0","Kapool","true"
  "Machine [1]","Web: Web-US","http://mangasite.com/mangacomic","1","1","10","//itemId","([0-9]{1,20})","1","0","Crawl Natural URL","true"
  "Machine [1]","Web: Web-US","http://someothersite.fr/kapala","1","1","10","//itemId","([0-9]{1,20})","1","0","Block Sellers","true"
  "Machine [1]","Link Test","http://kistergans.com/papals","0","1","1","//a/@href","(.*)","0","0",,
  "Machine [1]","TW Search","https://mankini.jp/ofcourse","0","100","1","//a/@href","(.*/status/.*)","0","0",,
  "Machine [1]","TW API","http://storagewars.com","0","1","1","//a/@href","(http.*)","0","0",,
  "Machine [1]","Amiz Metaquery","http://www.Amiz.com/s/","1","10","1","//a[contains]/@href","(http://www\.Amiz\.com/","0","0",,
  "Machine [1]","Amiz Metaquery Too","http://www.Amiz.de/s/?field-keywords=%q&amp;page=%i","1","1","10","//div/@href","http://www.Amiz.de/).*","0","0",,
  "Machine [2]","Subs.com","https://www.subs.com/search?f=%q&amp;p=%i","0","1","10","//dt/a/@href","((https?://[^/]+)?/[^/\+]{10,500})","0","0",,
  "Machine [2]","Extra.cc","http://extra.cc/search/","1","1","10","//a/@href","([^#]+)","0","0",,
  "Machine [2]","Monitoring","http://monitoring.com/nothing","1","1","1","//nothing","(.*)","0","0",,
  "Machine [2]","SM - abe.com - users","http://s.weibo.com/user/lamborghini","1","1","1","//div[@class=""person_detail""]/p[@class=""person_addr""]/a/@href","(.*)","0","0",,
  "Machine [2]","SM - koko.com","http://i.youku.com/u_search/?page=%i&amp;q=%q","1","1","10","//li[@class=""u_title""]/a/@href","(http://i.youku.com/u/.+)","0","0",,
  "Machine [2]","Amiz.com Page","http://www.Amiz.com/s/?field-keywords=%q&amp;page=%i","1","1","5","//div[@id=""rightResultsATF""]//@href","/dp/([^/]+)/.*","1","0",,
  "Machine [3]","MA: Apple.com (iTunes)","http://software.com/aabc","0","200","1","//iTunesApp/trackViewUrl","(@keli)","1","0",,
  "Machine [3]","MA: Wipple.com","http://kalamaza.ck/keywords","0","48","5","//a/@href","(http://abc.ck)","0","0",,
  "Machine [3]","SM: Linkage.com ","http://stormborn.com/lalala","0","100","5","//a/@href","(lililo+)","0","0",,
  "Machine [3]","SM: Afro.com - via SearchTool","http://lipidi.li/lili","0","1","1","//a/@href","(.*/status/[0-9]+)","0","0",,
  "Machine [3]","SM: Afro.com","http://sazdarma.ka/yoyo","0","1","1","//a/@href","(.*/status/[0-9]+)","0","0",,
  </code></pre>
  
  <p>This produces a Tree which looks something like this
  <img src="https://i.stack.imgur.com/TtxBI.jpg" alt="D3 Tree CSV"></p>
  
  <p>My problem is that I need each Machine's child (eg. "eSearch - Web-GB") to have a separate node for (Name,URL Template,Page Start,Page Size,Max Pages,etc.).
  But with the text attribute, while I can return all these attributes, they're all returned together with a comma separator and not as separate nodes.</p>
  
  <p>I've loaded the code in a <a href="http://jsfiddle.net/z2m5qLo4/4/" rel="nofollow noreferrer">JSFiddle</a>, but can't seem to get it working.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Also, is there an easier way to convert the CSV into the proper JSON format ?</p>