【问题标题】:D3 collapsible trees without flare.json没有flare.json的D3可折叠树
【发布时间】:2014-07-19 02:18:57
【问题描述】:

我正在尝试将可折叠树与可视化工具集成:

http://bl.ocks.org/robschmuecker/7880033

谁能告诉我如何让这段代码在没有flare.json 文件的情况下运行。我有 json 格式的数据,我需要使用该 json 输出来运行此代码。我将字符串转换为 json 格式的代码如下:

<html>

<body>

<script>
//example dat

var str = "Charles Johnson\t4184\nCharles Johnson-Donald Williams\t8385\nCharles Johnson-Donald Williams-Daniel Fertig\t428\nCharles Johnson-Donald Williams-Daniel Fertig-Lino Walling\t1091\nCharles Johnson-Donald Williams-Daniel Fertig-Lino Walling-Jim Cooke\t318";
var lines = str.split("\n");

var name_ = lines[0].split("\t")[0];
var val_ = lines[0].split("\t")[1];
//alert(val_);
var obj = {name:     name_,
           children: [],
           value:    val_};
//process all lines
for (var i=1;i<lines.length;i++) {
  var addr = lines[i].split("\t")[0].split("-");
  var val = lines[i].split("\t")[1];
  //alert(val);
  var local_obj  = obj;
  var recursive_obj;
  //alert(addr.length);
  for (var j=1;j<addr.length;j++) {
    recursive_obj = null;
    for (var k=0;k<local_obj.children.length;k++) {   //Doest get used for first instance
      if (local_obj.children[k].name==addr[j]) {
        recursive_obj=local_obj.children[k];
      }
    }
    if (recursive_obj==null) {
      recursive_obj = {name:     addr[j],
                       children: [],
                       value:    null
                      };
      local_obj.children.push(recursive_obj);
    }   
    local_obj=recursive_obj;

  }
  recursive_obj.value=val;
}

//print a json result
alert(JSON.stringify(obj));
</script>



 </body>
 </html>

此代码将字符串转换为 Json 格式。有人可以帮助我使用此代码而不是

treeJSON = d3.json("flare.json", function(error, treeData){}

并使可折叠树运行。如果有人可以帮助我,我将不胜感激。谢谢你:)

最好的问候 莫哈德

<!DOCTYPE html>
<meta charset="utf-8">

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="try.js"></script>
<body>
    <div id="tree-container"></div>
</body>
</html>

【问题讨论】:

  • 如果您的数据被格式化为类似于flare.json 中的数据,只需在该代码中将其用作data 并取出d3.json 行。
  • 谢谢@Lars...您能否详细说明一下。 obj 变量具有有效 json 格式的数据。我该如何从那开始呢?任何帮助将不胜感激:)
  • 整个代码都在 "treeJSON = d3.json("flare.json", function(error, treeData) " 函数内,所以我很困惑我必须在哪里进行更改:/跨度>

标签: javascript json d3.js


【解决方案1】:

现在你有obj,它已经是一个对象,类似于treeData需要在d3.json函数的回调中。您可以从该函数中取出所有内容,并从此转换:

d3.json("flare.json", function(error, treeData){
  //Do some stuff with treeData
})

到这里:

var treeData = obj;
//Do some stuff with treeData;

工作小提琴:fiddle

【讨论】:

  • 谢谢拉斯,我会试试看。所以这只是一行代码改变 :o ?
  • 好的,所以进行更改不会显示任何内容:|....我基本上复制了 d3.json("flare.json", function(error, treeData){} 中的所有内容并将其粘贴在下面var treeData = obj; 还有其他我需要做的吗?
  • 不应该有,如果你的 html 设置正确的话。我在答案中添加了一段工作代码。
  • 谢谢@ckersch...奇怪的是它仍然是空白的:/...我正在为您发送的小提琴使用一个简单的html文件,该文件附在我的问题下方。你能告诉我我在哪里犯了错误..非常感谢你的所有帮助顺便说一句:)
  • 如果无法查看您的代码,则不确定。我建议您进行调试并查看是否有任何错误,然后查看 html 并查看未呈现的内容。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-03-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-07-01
  • 1970-01-01
相关资源
最近更新 更多