如何使用d3.v4中的JSON数据创建树布局 - 不使用stratify() [英] How do I create a tree layout using JSON data in d3.v4 - without stratify()

查看:2521
本文介绍了如何使用d3.v4中的JSON数据创建树布局 - 不使用stratify()的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图更新一些d3代码从v3到版本4.我有一个树图使用JSON数据。 d3.v4示例说明如何使用stratify()将表格数据(例如flare.csv)转换为层次结构数据 https ://bl.ocks.org/mbostock/9d0899acb5d3b8d839d9d613a9e1fe04 。但我的数据是JSON,所以我不想要或需要stratify()。我得到这个错误:

I'm trying to update some d3 code from v3 to version 4. I have a tree diagram using JSON data. The d3.v4 examples show how to convert tabular data (e.g. flare.csv) to hierarchical data using stratify() https://bl.ocks.org/mbostock/9d0899acb5d3b8d839d9d613a9e1fe04. But my data is JSON so I don't want or need stratify(). I get this error:


undefined不是一个函数(评估'root.eachBefore')

undefined is not a function (evaluating 'root.eachBefore')

运行此代码:

var height = 200;
var width = 500;

var xNudge = 50;
var yNudge = 20;

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

var svg = d3.select("body").append("svg").attr("width","100%").attr("height","100%");
var chartGroup = svg.append("g").attr("transform","translate(50,200) rotate(-90)");

d3.json("treeData.json", function(treeData) {


    var root = treeData[0];
    tree(root);
    console.log('hello');//doesn't log to console, i.e. error occurs beforehand
}

treeData.json:

treeData.json:

[
  {
  "name": "Top Level",
  "parent": "null",
  "children": [
    {
      "name": "Level 2: A",
      "parent": "Top Level",
      "children": [
        {
          "name": "Son of A",
          "parent": "Level 2: A"
        },
        {
          "name": "Daughter of A",
          "parent": "Level 2: A"
        }
      ]
    },
    {
      "name": "Level 2: B",
      "parent": "Top Level"
    }
  ]
}
]

在d3.v4中不使用分层,即使用已经分层的数据?任何人都知道一个例子,或者可以发现我的代码中的问题?感谢

Is it actually possible to create a tree layout in d3.v4 without using stratify, i.e. using data that is already hierarchical? Does anyone know of an example, or can spot the problem in my code? thanks

推荐答案

我有同样的问题。 Emma的回复基本上回答了,但我仍然无法正常工作。我会详细说明一下,如果任何人都会发现它有所帮助。我创建了一个块,显示此处的功能结果,它基于上面的示例数据, Emma的回应 this block。

I had the same problem. Emma's response essentially answered it, but I still had trouble getting it to work properly. I'll elaborate a bit in case anyone may find it helpful. I created a block showing the functional result here, which is based on your example data above, Emma's response, and this block.

答案分三部分:


  • 您的JSON对象包含在数组括号中。删除那些括号(如我在gist中所做的那样),或者在你的treeData的末尾放置一个 [0] (就像Emma在上面的链接中所做的那样)

  • 将您的JSON对象传递给 d3.hierarchy (如Emma解释)。

  • 最后,为了命名节点,API似乎已经更改,这也在上面链接的块中处理。

  • You have your JSON object wrapped in Array brackets. Either remove those brackets (as I did in the gist), or put a [0] on the end of your treeData (as Emma did in the link above) to get the Object out of that 1 element Array.
  • Pass your JSON object to d3.hierarchy (as Emma explained).
  • Lastly, the API appears to have changed for naming the nodes, which is also taken care of in my block linked above.

为方便起见,以下是我制作的块的代码:

For convenience, here's the code from the block I made:

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(60,0)");

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

var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

d3.json("treeData.json", function(error, treeData) {
  if (error) throw error;

  var root = d3.hierarchy(treeData);
  tree(root);

  var link = g.selectAll(".link")
      .data(root.descendants().slice(1))
    .enter().append("path")
      .attr("class", "link")
      .attr("d", function(d) {
        return "M" + d.y + "," + d.x
            + "C" + (d.parent.y + 100) + "," + d.x
            + " " + (d.parent.y + 100) + "," + d.parent.x
            + " " + d.parent.y + "," + d.parent.x;
      });

  var node = g.selectAll(".node")
      .data(root.descendants())
    .enter().append("g")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
      .attr("transform", function(d) { 
        return "translate(" + d.y + "," + d.x + ")"; 
      })

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

  node.append("text")
      .attr("dy", 3)
      .attr("x", function(d) { return d.children ? -8 : 8; })
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { 
        return d.data.name;
      });
});

,此处的 treeData.json 数组:

{
  "name": "Top Level",
  "parent": "null",
  "children": [
    {
      "name": "Level 2: A",
      "parent": "Top Level",
      "children": [
        {
          "name": "Son of A",
          "parent": "Level 2: A"
        },
        {
          "name": "Daughter of A",
          "parent": "Level 2: A"
        }
      ]
    },
    {
      "name": "Level 2: B",
      "parent": "Top Level"
    }
  ]
}

这篇关于如何使用d3.v4中的JSON数据创建树布局 - 不使用stratify()的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆