javascript - 使用 D3 从 CSV 文件创建分层内容的有效方法

Question

我在 CSV 文件中有一个标签列表，第二列显示它们属于哪个 bundle 。带有空标签名称的其他 CSV 行表示 bundle 。

我用了D3读取 CSV 并为每个 bundle 生成父 DIV，并使用该 bundle 中列出的所有标签填充 bundle DIV。我在这个 block 中有一个工作示例:http://bl.ocks.org/anilsg/225acdf41638140959ae72aca039b815

我觉得我的方法很尴尬。我必须删除最初在错误级别创建的节点，并使用程序方法对数据进行第二次传递。

有更好的方法吗？我注意到 D3 key() 函数和 d3.hierarchy 模块，但我不确定它们是否是合适的候选者。也许有更好的方法来使用 filter() 和选择？

Answer 1

d3.js 中有两种处理“层次结构”数据结构的方法: d3.hierarchy、d3.stratify

使用 d3.hierarchy，您的输入数据应该是 JSON 格式。
使用 d3.stratify，您的输入数据应该是 CSV 或文本，并且只有一个根节点。

<小时/>

但是您在此处的演示中提供的 tag.txt，它可以使用 d3.nest() 来使事情变得更容易。您可以使用 selectAll 和 chaing data() 来更好地修改代码的另一个概念是嵌套选择 ( further reading )，在使用 d3.nest() 转换后利用修改后的数据。

此外，在您的场景中，附加和插入的工作原理相同。 删除也没有必要，仅当您需要交互式更新时。

这是我的代码的解释和一些小建议(开放供讨论)

首先，由于所有bundle元素都在容器下，所以我只是从html正文中附加它。

const container = bodyG.append('div')
                       .attr('id','container');

第二，我们可以开始在容器选择上添加第一个 bundler 元素。

const bundles = container.selectAll('div.bundle')
                         .data(d3nest)
                         .enter()
                         .append('div')
                         .classed('bundle', true)
//d3nest is created by using d3.nest(), refer to the demo in the last line on Observable 

第三，为了让代码更加清晰，我将div文本的添加过程与定义bundle元素分开。

bundles.insert('h2')
       .text((d)=> d.key);

第四，从这里开始，我们使用了嵌套选择的概念，通过使用SelectAll和data()来进入嵌套的数据结构。

const tags = bundles.selectAll('p.tag')
               .data((d)=> d.values) // below here, all d mean d.values  
               .enter()              // which is the enter to the nest data.
               .append('p')
               .classed('tag', true)
               .text((d)=> d.tag); 

希望本文能给您带来一些思考!它可能不是使原始代码变得更好的唯一方法!

Observable 演示 https://beta.observablehq.com/@weitinglin/is-there-a-better-way-to-use-d3-to-create-hierarchical-conten