1

我是 d3.js 的新手，需要帮助来调整Zoomable Sunburst以使其与自引用 CSV 数据一起工作。来自输入 CSV 的示例行：

id,parentId,name,size
ROOT,NULL,Root,
RE,ROOT,General > Revenue Expenditure,
RE11,RE,Main supervision recovery etc.,
RE11A109K,RE11,Shivjayanti celebrations and lighting,170000
RE11H108,RE11,Electicity for import tax naka,2550000
RE11J,RE11,Maintaince for main building,
RE11J101A,RE11J,Electricity expenditure,11475000
RE11J101 C,RE11J,Power lift,2125000

正如你所看到的，有不同的深度级别。在某些地方，数据达到 3 级，在其他地方，我们的父子关系可能达到 9 级，依此类推。那是给你的政府预算！虽然除了这 4 列之外还有一些对可视化并不重要的列（此处省略），但我会在鼠标悬停时在侧窗格中显示它们的内容。因此，虽然不是关键的，但任何额外的列都需要通过而不被丢弃。

我查看了许多 d3.nest() 示例，但这些示例似乎不适用于父子自引用列和具有可变深度级别的数据。

我目前正在使用一种解决方法将其转换为flare.json 格式的分层JSON，使用这个DataStructures.Tree项目。但寻找更直接的解决方案。几乎就在那里，但不能混合来自不同来源的代码。如果能看到完整的自上而下的解决方案，将不胜感激。提前致谢！

4

1 回答 1

4

知道了。我们包含来自问题中链接的 DataStructures.Tree 项目的这些脚本：base.js、DataStructures.Tree.js。（您可以在 /js/lib/ 和 /js/vendor/ 中找到它们）

<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="DataStructures.Tree.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>

然后，我们替换这一行，

d3.json("flare.json", functon(error, root) {

..用这些行：

d3.csv("electrical5.csv", function(data){
var tree = DataStructures.Tree.createFromFlatTable(data),
           root = tree.toSimpleObject(function(objectToDecorate, originalNode) {
                objectToDecorate.size = originalNode.size;
                if (objectToDecorate.children && objectToDecorate.children.length == 0) {
                    delete objectToDecorate.children;
                }
                return objectToDecorate;
            });
//console.log(JSON.stringify(root));

让其他一切保持原样。

取消注释 console.log 行以进行调试；当您加载页面时，它将把 json 代码放在浏览器控制台中。您还可以在网页中创建一个文本区域并在其中输出 json 代码。

document.getElementById("SHOWME").value = JSON.stringify(root);

[在页面底部]

<textarea id="SHOWME"></textarea>

它将是未格式化的 json 代码，因此将其复制粘贴到http://codebeautify.org/jsonviewer应该会为您提供格式良好的 json。

要获得除常规 [id,parentId,name,size] 之外的更多列，我们必须编辑 DataStructures.Tree.js

找到这些行：

simpleChildRepresentation.push(decorateNode({
    "name" :  node.name,
    "children" : children
}, node));

并以与 node.name 行相同的格式插入额外的列。

simpleChildRepresentation.push(decorateNode({
    "name" :  node.name,
     //CUSTOM COLUMNS
    "workcode" : node.id,
    "parentcode" : node.parentId,
    "department" : node.department,
    "totalorextract" : node.totalorextract,
    "total" : node.total,
    "pages" : node.pages,
    //CUSTOM COLUMNS DONE
    "children" : children
}, node));

您现在可以在任何使用flare.json 的d3.js 可视化中直接可视化自引用的csv 数据。不过，动画有点笨拙。

于 2015-01-03T16:07:17.120 回答