【问题标题】:Using D3 loaded with json file, How can get parent nodes value from json file?使用加载了 json 文件的 D3,如何从 json 文件中获取父节点值?
【发布时间】:2014-02-07 05:35:13
【问题描述】:

我正在使用 d3 来可视化 json 文件中的数据,这个 json 文件包含子节点和父节点。像这样:

{
    "name": "root",
    "size": 100,
    "child": [
        {
            "name": "First1",
            "size": 70,
            "child": [
                {
                    "name": "Second1",
                    "size": 85
                },
                {
                    "name": "Second2",
                    "size": 81
                }
            ]
        },
        {
            "name": "First2",
            "size": 40,
            "child": [
                {
                    "name": "Second3",
                    "size": 50,
                    "child": [
                        {
                            "name": "Third1",
                            "size": 80
                        }
                    ]
                }
            ]
        }
    ]
}

我想在不同的深度可视化相应的大小值。例如,对于 3 深度,我想获取 Third1 的“大小值”,对于深度 2,我想获取 Second1 Second2 Second3 的大小值,对于深度 1,我想获取 First1 和 First 2 的值。但是,现在,对于深度 2,我得到的值是深度 3 的总和,例如,我想得到 Second3 的值是 50,但实际上我得到的是 80,这是第三个 1 的值。另外,如果我想获得应该为 40 的 First2 的值,我会得到 50+80=130。这真的很令人困惑,我花了两天时间仍然一无所获。所以请帮我看看,我真的很感激!谢谢!

【问题讨论】:

  • 如果您发布您的代码,我们或许能够找出问题所在。否则我只能引导你到:Access / process (nested) objects, arrays or JSON.
  • x.domain([0, d3.max(d.parent.children, function(d) { return d.value; })]).nice();而这个:x.domain([0, d3.max(d.children, function(d) { return d.value; })]).nice();我只想缩放显示当前值,而不是父母或孩子的。这可能吗?谢谢!
  • edit您的问题添加新信息。

标签: javascript json d3.js


【解决方案1】:

当然,我将 child 更改为 children,并且拥有这个 fiddle。这是你想要的吗?

除了上面的改变,我没有做任何特别的事情。来自不同级别的数字对应于树的深度,可以在相应的文本元素中看到:

.text(function(d) { return d.depth + ": " + d.size;});

【讨论】:

  • 非常感谢!这有可能变成这样的图表:bl.ocks.org/mbostock/1283663 而不是树?如果我换成图表,结果还是不变..
  • 对于您提到的图表,算法的工作方式是计算给定分支中叶节点的总和。请注意 Mike 使用的数据中,作为父节点的节点如何没有大小信息(查看 utils 下的调色板以遵循 3 深层次结构)。也许我说的是显而易见的,而您一直都知道这一点……但是仍然要进行健全性检查。
  • 嗨,你是对的,我看到了你的代码,并编辑了我的,虽然这两个是不同的图表,但我做到了!谢谢! !!
猜你喜欢
  • 2014-07-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-09-29
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多