删除 d3.js wordcloud 的 svg onclick

Question

我有一个 html 表格，用于选择数据源以在 d3.js 中提供我的 wordcloud，但我很难让它工作。这是我目前的代码。

我正在使用来自 https://github.com/wvengen 的 cloudword 解决方案，并在我的项目的网络中托管 .js 脚本

版本：

我可以加载所选数据，但它会加载旧数据，我需要删除事件 svg 并添加新的。

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://d3js.org/d3.v3.min.js"></script>

</head>
<body>

<div id='option'>
    <form>
        <select name="select_data">
            <option value="data" onclick="setData()">All</option>
            <option value="data_a" onclick="aData()">First</option>
            <option value="data_b" onclick="bData()">Second</option>
            <option value="data_c" onclick="cData()">Third</option>
        </select>
    </form>
</div>
<div id='wordcloud'></div>

<script src="https://www.agencia-ahi.cl/archive/d3.layout.cloud.js"></script>
<script src="https://www.agencia-ahi.cl/archive/d3.wordcloud.js"></script>

<script>

var data = [{"text":"perro", "size":67},{"text":"gato", "size":59},{"text":"oso", "size":40}];
var data_a = [{"text":"paloma", "size":64},{"text":"garza", "size":55}];
var data_b = [{"text":"leon", "size":7},{"text":"zorrillo", "size":3}];
var data_c = [{"text":"raton", "size":3}];

d3.wordcloud()
        .words(data)
        .start();

function setData() {
    d3.wordcloud()
        .words(data)
        .start();
        }

function aData() {
    d3.wordcloud()
        .words(data_a)
        .start();
        }

function bData() {
    d3.wordcloud()
        .words(data_b)
        .start();
        }

function cData() {
    d3.wordcloud()
        .words(data_c)
        .start();
        }

</script>
</body>
</html>

Answer 1

在onclick 函数后添加remove svg 函数

    d3.select("svg").remove();

删除 d3.js wordcloud 的 svg onclick

Remove svg onclick for d3.js wordcloud

javascript

charts

word-cloud

d3.js