Javascript 如何将数组打印到屏幕上?SVG/D3/JS

Javascript 如何将数组打印到屏幕上?SVG/D3/JS,javascript,svg,d3.js,Javascript,Svg,D3.js,我有一个force布局图,当我点击节点时,一个数组会打印到控制台 此列表是仅包含选定节点的数组。因此,列表将根据选择/取消选择的节点而变化 我想做的是在屏幕上有一部分显示所选节点的数组/列表。我希望它类似于控制台,但我需要它自我更新,而不是每次单击节点时打印出阵列,我需要它只是一个列表-没有重复项。我想知道如何做到这一点,以及如何将列表文本实际附加到SVG --------------------添加代码 -HTML 云彩 ‌​ 搜寻 方向 强迫 肖像画 景观 如果没有JavaScript代码

我有一个force布局图,当我点击节点时,一个数组会打印到控制台

此列表是仅包含选定节点的数组。因此,列表将根据选择/取消选择的节点而变化

我想做的是在屏幕上有一部分显示所选节点的数组/列表。我希望它类似于控制台,但我需要它自我更新,而不是每次单击节点时打印出阵列,我需要它只是一个列表-没有重复项。我想知道如何做到这一点,以及如何将列表文本实际附加到SVG

--------------------添加代码 -HTML


云彩
‌​
搜寻
方向
强迫
肖像画
景观

如果没有JavaScript代码,很难给出解决问题的确切答案,因此我将给您一个更一般的答案

步骤1:在html代码中创建一个div以包含数组

<div id="arrayStrContainer"></div>

此外,您不必在SVG中创建和显示列表。您也可以使用D3在可视化之外操纵DOM,我怀疑
ul
元素可能是显示所选节点列表的最佳方式。如果您可以发布一个HTML/JS代码的示例,那么就更容易给出更具体的答案。@musicaly\u ut添加了HTML代码:)
<div id="arrayStrContainer"></div>
node = d3.selectAll('g node');
node.on('click', function(d) {
    // console.log(d.arrayAttr) // what you did before
    d3.select('#arrayStrContainer').text(JSON.stringify(d.arrayAttr));
    // this will override whatever was in the div with the new array. 
})