javascript - Create tree hierarchy from csv in d3.js - Stack Overflow

admin管理员组

文章数量:1388140

I've read a number of questions on similar subjects, but none of the answers seem to work for my use case (or I'm just really confused).

I have a csv file dump from a database and I want to show the data's hierarchy using the Dendrogram example found here .html

My csv file looks like this:

groupGenre,basicGenre,value
Maps,Atlases (Geographic),10
Catalogs,Auction catalogs,28
No larger group,Academic dissertations,451
No larger group,Account books,1
No larger group,Acrostics,56
No larger group,Addresses,62
No larger group,Advertisements,790
No larger group,Allegories,35
No larger group,Almanacs,3401
No larger group,Alphabets,100
No larger group,Anagrams,4
No larger group,Anthologies,133
No larger group,Anti-slavery literature,1

where value is the number of books published in that genre.

Here is the code I've adapted and now revised based on suggestions below It can also be found at .html

var width = 960,
    height = 2000;

var tree = d3.layout.tree()
    .size([height, width - 160]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var vis = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(40, 0)");

d3.csv("../data/genreNested.csv", function(csv) {

  var nodes = tree.nodes(makeTree(csv));

  var link = vis.selectAll("path.link")
      .data(tree.links(nodes))
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

  var node = vis.selectAll("g.node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

  node.append("circle")
      .attr("r", 4.5);

  node.append("text")
      .attr("dx", function(d) { return d.values ? -8 : 8; })
      .attr("dy", 3)
      .attr("text-anchor", function(d) { return d.values ? "end" : "start"; })
      .text(function(d) { return d.key; });
});

//NEW Function to Build Tree from CSV data
function makeTree(nodes) {
    var nodeByGenre = {};

    //index nodes by genre in case they are out of order
    nodes.forEach(function(d) {
        nodeByGenre[d.basicGenre] = d;
    });

    //Lazily pute children.
    nodes.forEach(function(d) {
        var groupGenre = nodeByGenre[d.groupGenre];
        if (groupGenre.children) groupGenre.children.push(d);
        else groupGenre.children = [d]
    });

    return {"name": "genres", "children": nodes[0]}
}

I've read a number of questions on similar subjects, but none of the answers seem to work for my use case (or I'm just really confused).

I have a csv file dump from a database and I want to show the data's hierarchy using the Dendrogram example found here http://mbostock.github./d3/ex/cluster.html

My csv file looks like this:

groupGenre,basicGenre,value
Maps,Atlases (Geographic),10
Catalogs,Auction catalogs,28
No larger group,Academic dissertations,451
No larger group,Account books,1
No larger group,Acrostics,56
No larger group,Addresses,62
No larger group,Advertisements,790
No larger group,Allegories,35
No larger group,Almanacs,3401
No larger group,Alphabets,100
No larger group,Anagrams,4
No larger group,Anthologies,133
No larger group,Anti-slavery literature,1

where value is the number of books published in that genre.

Here is the code I've adapted and now revised based on suggestions below It can also be found at http://dev.stg.brown.edu/projects/Egan/Vis/tree/tree.html

var width = 960,
    height = 2000;

var tree = d3.layout.tree()
    .size([height, width - 160]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var vis = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(40, 0)");

d3.csv("../data/genreNested.csv", function(csv) {

  var nodes = tree.nodes(makeTree(csv));

  var link = vis.selectAll("path.link")
      .data(tree.links(nodes))
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

  var node = vis.selectAll("g.node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

  node.append("circle")
      .attr("r", 4.5);

  node.append("text")
      .attr("dx", function(d) { return d.values ? -8 : 8; })
      .attr("dy", 3)
      .attr("text-anchor", function(d) { return d.values ? "end" : "start"; })
      .text(function(d) { return d.key; });
});

//NEW Function to Build Tree from CSV data
function makeTree(nodes) {
    var nodeByGenre = {};

    //index nodes by genre in case they are out of order
    nodes.forEach(function(d) {
        nodeByGenre[d.basicGenre] = d;
    });

    //Lazily pute children.
    nodes.forEach(function(d) {
        var groupGenre = nodeByGenre[d.groupGenre];
        if (groupGenre.children) groupGenre.children.push(d);
        else groupGenre.children = [d]
    });

    return {"name": "genres", "children": nodes[0]}
}

• javascript
• csv
• charts
• d3.js

Share Improve this question Follow edited Sep 12, 2012 at 13:04 paxRoman 2,06233 gold badges1919 silver badges3232 bronze badges asked Aug 20, 2012 at 18:14 Jean BauerJean Bauer 24311 gold badge44 silver badges99 bronze badges 1

• Did you see the Tree Layout from CSV example in response to this question? – mbostock Commented Aug 20, 2012 at 21:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

The first issue looks to be that you are passing a function to entries instead of an array which it is expecting as per the docs. Try passing the parameter csv to the entries method instead.

function makeTree(csv) {
   var data = d3.nest()
        .key(function(d) {return d.genre; })
        .key(function(d) {return d.groupGenre; })
        .entries(csv);

   return data;
}

The second issue is that your makeTree function is not returning a tree structure like tree.nodes is expecting, see docs here. You want to create an object like the following with your makeTree method.

 var root = 
 {
 "basicGenre": "Maps",
 "value" : 5,
 "children": [
  {
   "basicGenre": "Atlases (Geographic)",
   "value" : 10
   "children": [
    {
     "basicGenre": "Atlases 1",
     "children": []
    },
    {
     "basicGenre": "Atlases 2",
     "children": []
    }
   ]
  }
 ]
}

Basically you need to create a tree like heiarchary based on the groupGenre and basicGenre all underneath some all enpassing root node.

You may also want to look at the this SO question as it deals with creating a proper object to pass to tree.nodes.

Here is a working JSFiddle using your updated code.

本文标签： javascriptCreate tree hierarchy from csv in d3jsStack Overflow