[英]Remove svg onclick for d3.js wordcloud
我有一個 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>
在 onclick 功能后添加刪除 svg 功能
d3.select("svg").remove();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.