Question

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

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

我想要做的是让屏幕的一部分显示所选节点的数组/列表。我希望它类似于控制台，但我需要它来更新自己，而不是每次点击节点时打印出阵列，我需要它只是一个列表 - 没有重复。我想知道如何执行此操作以及如何将列表文本实际附加到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>

Answer 1

如果没有您的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. 
})

如何将数组打印到屏幕？ SVG / D3 / JS

1 个答案: