Question

我是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 project。但寻找更直接的解决方案。几乎在那里，但不能混合来自不同来源的代码。很高兴能够展示一个完整的自上而下的解决方案。提前谢谢！

Answer 1

知道了。我们在问题中链接的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代码放在浏览器控制台中。您还可以在网页中创建一个textarea并输出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数据。不过，动画有点笨拙。

d3.js来自自引用CSV输入的Zoomable Sunburst可视化

1 个答案: