删除 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 功能后添加删除 svg 功能

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

删除 d3.js wordcloud 的 svg onclick

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-01-17 14:46:42

删除 d3.js wordcloud 的 svg onclick

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-01-17 14:46:42

解决方案1
1 已采纳 2020-01-17 14:46:42