gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:47:14 28 4
gpt4 key购买 nike

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Cloud</title>
<script type="text/javascript" src="network.json"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>‌​
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

</head>
<body>
<div class="ui-widget">
<input id="search">
<button type="button" onclick="searchNode()">Search</button>
</div>
<svg id="cloud" width="800" height="600" ></svg>
<form>
Orientation
<select id="myListOrientation" onchange="orientation()">
<option selected="selected">Force</option>
<option>Portrait</option>
<option>Landscape</option>
</select>
</form>

<link href="ajs_network1.css" rel="stylesheet" type="text/css" />
<script src="ajs_network1.js" type="text/javascript"></script>

</body>
</html>

最佳答案

如果没有 JavaScript 代码,就很难给您解决问题的确切答案,因此我会给您一个更通用的答案。

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

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

第 2 步:单击时,将对象的字符串化版本放入屏幕

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.
})

关于javascript - 如何将数组打印到屏幕上? SVG/D3/JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27227976/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com