我正在这里处理这个 D3 可视化: https://bl.ocks.org/mbostock/4347473
如何添加标签旁边每个框的大小,如下所示:https://observablehq.com/@d3/zoomable-icicle ?
我不太了解代码,不知道在哪里附加代码。我假设是这一行:
cell.append("title")
.text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);
但是 Observable 格式让我失望。
最佳答案
如果您想添加<title>
具有每个框的值(您称为“大小”)的元素,您所需要的只是:
selection.append("title")
.text(d => d.value);
关于 Observable 中的那一行...
.text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);
...您无法使用它,因为 ancestors()
是 D3 v4/v5 的一种方法,您链接的 bl.ocks 使用 v3。除此之外,这是什么……
d.ancestors().map(d => d.data.name).reverse().join("/")
...所做的是获取所有 parent 的名字并反转它(如果你查看可观察的值,你会看到在你有序列的值之上,从根到当前框。因此,你不'不需要它,您所需要的只是模板文字中的第二行:
format(d.value)
这是您与该更改链接的 bl.ocks:https://bl.ocks.org/GerardoFurtado/3bc4b6c7260d131ed78a5922700fc633/5ba087da8a55063c58a66314dadafd06585b1329
关于javascript - 为冰柱可视化添加尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55149238/