草庐IT

javascript - 来自 CSV 的 d3 可缩放 TreeMap

coder 2024-07-25 原文

我是 D3 的新手，我发现它非常令人羞愧。

我的目标是从 CSV 文件制作树状图。我想使用 CSV 格式，因为我将处理电子表格中的值，而且以这种方式保存文件对我来说很容易。

我正在尝试以分层格式存储数据，类似这样 (hier.csv):

parent,child,value
Homer Simpson,Bart,20
Homer Simpson,Lisa,14
Homer Simpson,Maggie,6
Peter Griffin,Chris,19
Peter Griffin,Meg,12
Peter Griffin,Stewie,9

我正在使用这个 Zoomable Treemap example .

我希望树可以任意深，即如果 Bart 在我的示例中有 child ，并根据名字相应地积累父/子关系。

我找到了一个 great example of this for Sankey Diagrams ，但我还没有找到可缩放 TreeMap 的等效项。

有没有办法在 Bostock's example 的第 124 行和第 126 行之间插入一些代码？为 Zoomable Treemap 正确设置我的数据格式？ (我可以更改 CSV 的布局，但希望保留 CSV 格式)。类似这种使用 nest() 的方法，但显然这不起作用:

d3.csv("./hier.csv", function(hier) {

  var root = { 
    "name": "myrootnode",
    "children": d3.nest()
        .key(function (d) { return d.parent; })
        .key(function (d) { return d.child; })
        .entries(hier)
  };

  initialize(root);
  accumulate(root);
  layout(root);
  display(root);
  //etc...

我看到一些示例和 StackOverflow 问题解决了其中的点点滴滴，但无法将其端到端地整合在一起。而且我一直在研究和破解无济于事。我会欢迎一些帮助。谢谢!

在这里摆弄

http://jsfiddle.net/KXuWD/

fiddle 笔记:

  • 我在评论指出的第 90 行附近寻求帮助
  • 我设置了一个内联变量来保存 flare.json 的精简副本
  • 我打算在现实生活中将数据保存在一个单独的文件中，但对于 JSFiddle，它必须被拉入内联；当然，如果我能弄清楚主要逻辑，这将很容易适应回单独的数据文件。
  • 此示例似乎不适用于 D3 版本 3.0.4，这是 JSFiddle 当前的内置版本。我为示例导入了 v2.x，因为这适用于 Bostock 的示例。这是一个潜在的单独问题......

更新

我克服了部分问题。我认为 nest() 是必要的，但我没有正确更新访问器。这是对大多数有效的东西的非常草率的看法: http://bl.ocks.org/maw246/7303963

我的示例与 Bostock 示例之间的主要区别:

  • CSV 在加载后使用 d3.nest() 进行嵌套。这将其强制转换为分层的 JSON 对象格式
  • 许多(如果不是全部)对“children”的引用已被“values”取代，因为 d3.nest() 使用 key 和 values 构建树 属性，而不是 Treemap 预期的 name 和 children 属性。用于调整 block 大小的 value 属性保持不变。

遗留问题

  • 它不会任意深入。我正在考虑重新组织数据以更好地利用 d3.nest() 功能的方法，但还没有尝试过。
  • child 的名字显示为 undefined。我确定我只是忽略了一些简单的事情，但我最关心的是让核心功能正常工作，所以我会在有时间的时候对这部分进行一些修改。

注意:我仍在寻求帮助，以一种干净且惯用的方法来执行此操作，包括有关如何最好地组织 CSV 以分层嵌套到任意深度的建议!

最佳答案

在调查树状图的使用时，我也遇到过类似的挫折。 来自服务器的数据是平面表格样式的数据，例如:

var myData = [{ "thedad": "Homer Simpson", "name": "Bart", "value": 20 },
{ "thedad": "Homer Simpson", "name": "Lisa", "value": 14 },
{ "thedad": "Homer Simpson", "name": "Maggie", "value": 6 },
{ "thedad": "Peter Griffin", "name": "Chris", "value": 19 },
{ "thedad": "Peter Griffin", "name": "Meg", "value": 12 },
{ "thedad": "Peter Griffin", "name": "Stewie", "value": 16 },
{ "thedad": "Bart", "name": "Bart Junior A", "value": 77 },
{ "thedad": "Bart", "name": "Bart Junior B", "value": 32 }];

然而，d3 treemap 期望它处理的 javascript 对象采用分层格式。 经过繁琐的搜索，我发现提到了 underscore.nest在 d3 谷歌组。 https://github.com/iros/underscore.nest

"Underscore.Nest is an extenstion [of the underscore js library] for converting flat data into nested tree structures".

使用这个库(同样，依赖于 underscore.js)意味着你没有 求助于 d3.nest 并担心它产生的键/值数据格式。

工作示例
这是树状图的一个工作示例，它采用平面对象列表 已被 underscore.nest 转换为 d3 TreeMap 所需的分层格式。 (不带 underscore.nest 的原始 TreeMap 来自 mbostock 的示例:http://bost.ocks.org/mike/treemap/)

http://jsbin.com/aGIvOnEH/3 

root = _.nest( myData, "thedad");
root.name = "TV Dads";

希望这是有用的。

关于javascript - 来自 CSV 的 d3 可缩放 TreeMap ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19759293/

javascriptTreeMap34codenoreferrercsvd3.js

有关javascript - 来自 CSV 的 d3 可缩放 TreeMap的更多相关文章

  1. ruby - 用逗号、双引号和编码解析 csv - 2

    我正在使用ruby​​1.9解析以下带有MacRoman字符的csv文件#encoding:ISO-8859-1#csv_parse.csvName,main-dialogue"Marceu","Giveittohimóhe,hiswife."我做了以下解析。require'csv'input_string=File.read("../csv_parse.rb").force_encoding("ISO-8859-1").encode("UTF-8")#=>"Name,main-dialogue\r\n\"Marceu\",\"Giveittohim\x97he,hiswife.\"\

  2. ruby - 我可以使用 Ruby 从 CSV 中删除列吗？ - 2

    查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  3. ruby CSV : How can I read a tab-delimited file? - 2

    CSV.open(name,"r").eachdo|row|putsrowend我得到以下错误:CSV::MalformedCSVErrorUnquotedfieldsdonotallow\ror\n文件名是一个.txt制表符分隔文件。我是专门做的。我有一个.csv文件，我转到excel，并将文件保存为.txt制表符分隔的文件。所以它是制表符分隔的。CSV.open不应该能够读取制表符分隔的文件吗？ 最佳答案 尝试像这样指定字段分隔符:CSV.open("name","r",{:col_sep=>"\t"}).eachdo|row|

  4. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  5. ruby-on-rails - 使用 RSpec 测试 CSV.generate - 2

    我在Rails3.1项目中有以下助手-我只是想知道是否有办法测试CSV.generate调用。我很想说我知道如何去做，但事实是我什至不知道从哪里开始。任何想法表示赞赏。require'csv'moduleAdmin::PurchasesHelperdefcsv_purchase_listcolumns=['course','amount','first_name','last_name','contact_phone','contact_mobile','created_at']CSV.generate(:col_sep=>";",:row_sep=>"\r\n",:headers=>

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - 如何从 ARGF 读取 csv - 2

    在Ruby1.9中，我如何从ARGF中读取CSV？我尝试了以下方法，但没有打印任何内容:require'csv'CSV(ARGF).readdo|row|prowendhttp://www.ruby-doc.org/core-1.9.3/ARGF.htmlhttp://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV.html 最佳答案 如果你想偷懒你可以试试:CSV.new(ARGF.file).eachdo|row|...end来源:http://www.ruby-doc.org/std

  8. ruby - 可以正常中断的来自 Rake 的长时间运行的 shell 命令？ - 2

    在几个项目中，我希望有一个类似rakeserver的rake任务，它将通过任何需要的方式开始为该应用程序提供服务。这是一个示例:task:serverdo%x{bundleexecrackup-p1234}end这行得通，但是当我准备停止它时，按Ctrl+c并没有正常关闭；它中断了Rake任务本身，它说rakeaborted!并给出堆栈跟踪。在某些情况下，我必须执行Ctrl+c两次。我可能可以用Signal.trap写一些东西来更优雅地中断它。有没有更简单的方法？ 最佳答案 trap('SIGINT'){puts"Yourmessa

  9. ruby - 如何跳过 CSV 文件的第一行并将第二行作为标题 - 2

    有没有办法跳过CSV文件的第一行，让第二行作为标题？我有一个CSV文件，第一行是日期，第二行是标题，所以我需要能够在遍历它时跳过第一行。我尝试使用slice但它会将CSV转换为数组，我真的很想将其读取为CSV，以便我可以利用header。 最佳答案 根据您的数据，您可以使用另一种方法和skip_lines-option此示例跳过所有以#开头的行require'csv'CSV.parse(DATA.read,:col_sep=>';',:headers=>true,:skip_lines=>/^#/#Markcomments!)do|

  10. ruby-on-rails - 我真的需要在 Rails 中使用 csv gem 吗？ - 2

    我的问题很简单:我是否必须在使用RubyonRails的类上require'csv'？如果我打开一个railsconsole并尝试使用CSVgem它可以工作，但我必须在文件中这样做吗？ 最佳答案 CSVlibrary是ruby​​标准库的一部分；它不是gem(即第三方库)。与所有标准库(与核心库不同)一样，csv不会由ruby​​解释器自动加载。所以是的，在您的应用程序中某处您确实需要要求它:irb(main):001:0>CSVNameError:uninitializedconstantCSVfrom(irb):1from/Us

随机推荐