javascript - 在 d3.js 中从 csv 创建树层次结构

Question

我已经阅读了很多关于类似主题的问题，但似乎没有一个答案适用于我的用例(或者我真的很困惑)。

我有一个来自数据库的 csv 文件转储，我想使用此处找到的树状图示例显示数据的层次结构 http://mbostock.github.com/d3/ex/cluster.html

我的 csv 文件如下所示:

groupGenre,basicGenre,valueMaps,Atlases (Geographic),10Catalogs,Auction catalogs,28No larger group,Academic dissertations,451No larger group,Account books,1No larger group,Acrostics,56No larger group,Addresses,62No larger group,Advertisements,790No larger group,Allegories,35No larger group,Almanacs,3401No larger group,Alphabets,100No larger group,Anagrams,4No larger group,Anthologies,133No 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 belowIt 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 compute 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]}
}

Answer 1

第一个问题看起来是您正在将一个函数传递给 entries 而不是它根据 the docs 期望的数组.尝试将参数 csv 传递给 entries 方法。

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

   return data;
}

第二个问题是您的 makeTree 函数没有返回像 tree.nodes 期望的树结构，请参阅文档 here .您想要使用 makeTree 方法创建如下所示的对象。

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

基本上，您需要创建一个基于 groupGenre 和 basicGenre 的 heiarchary 树，所有这些都在一些完全包含的根节点下。

您可能还想查看 this SO question因为它处理创建一个适当的对象以传递给 tree.nodes。

这是一个有效的 JSFiddle 使用更新后的代码。