Javascript 触发onchange函数时更改单词cloud
我想在触发onchange函数时更改单词cloud。 在我当前的Script bellow中，当我更改下拉列表中的选择时，另一个图像显示在我的chrome窗口上，我认为这可能与此有关，如Javascript 触发onchange函数时更改单词cloud,javascript,d3.js,append,html-select,Javascript,D3.js,Append,Html Select,我想在触发onchange函数时更改单词cloud。 在我当前的Script bellow中，当我更改下拉列表中的选择时，另一个图像显示在我的chrome窗口上，我认为这可能与此有关，如d3.select（“body”）.append（“svg”） 如何一次显示一个wordcloud而不附加到当前窗口？ 我尝试了d3。选择（“body”）=“svg”，但没有起作用，我尝试删除空的清除屏幕body元素，然后显示单词cloud也不起作用 任何提示都将不胜感激 谢谢 <!DOCTYPE html
d3.select（“body”）.append（“svg”）d3。选择（“body”）=“svg”清除body<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="js/d3.js"></script>
<script src="js/d3.layout.cloud.js"></script>
<script>
function displayResult()
{
//location.reload();
//var e = document.getElementsByTagName('svg');
//e.removeChild(document.body.svg);
var client_name=document.getElementById("client_name");
var client_nameSelected = client_name.options[client_name.selectedIndex].value;
//alert(client_nameSelected);
var fill = d3.scale.category20();
//var ClientName = {"Hello":0.10 , "world":0.20, "normally cool!":0.25, "you":0.15, "want":0.60, "more":0.45, "words":0.90 };
var data = { 'name1':{"Hello":0.10 , "world":0.20, "normally cool!":0.65, "you":0.15, "want":0.60, "more":0.85, "words":0.90 }, 'name2':{"Hello":0.10 , "world":0.20, "normally cool!":0.25, "you you":0.15, "Hug":0.99, "more feedback":0.45, "words":0.90 }};
var ClientName = data[client_nameSelected];
var keysdic = Object.keys(ClientName);
//document.write(keysdic);
d3.layout.cloud().size([600, 600])
.words( [].concat(keysdic)
.map(function(d) {
var wordsize = 10 + ClientName[d] * 40 ;
result = {text: d, size: wordsize };
return result;
}))
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
function draw(words) {
d3.select("body").append("svg")
.attr("padding", 60)
.attr("width", 600)
.attr("height", 600)
.append("g")
.attr("transform", "translate(150,150)")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
}
</script>
<body>
Client Name List :
<select name = 'client_name' id = "client_name" onchange="displayResult();" >
<option value='name1'>name1</option>
<option value='name2'>name2</option>
</select><br />
<body>
函数displayResult（）
{
//location.reload（）；
//var e=document.getElementsByTagName（'svg'）；
//e、 removeChild（document.body.svg）；
var client_name=document.getElementById（“client_name”）；
var client\u nameSelected=client\u name.options[client\u name.selectedIndex].value；
//警报（已选择客户端名称）；
var fill=d3.scale.category20（）；
//var ClientName={“Hello”：0.10，“world”：0.20，“normaly cool！”：0.25，“you”：0.15，“want”：0.60，“more”：0.45，“words”：0.90}；
var数据={'name1'：{“你好”：0.10，“世界”：0.20，“正常酷！”：0.65，“你”：0.15，“想要”：0.60，“更多”：0.85，“单词”：0.90}，'name2'：{“你好”：0.10，“世界”：0.20，“正常酷！”：0.25，“你”：0.15，“拥抱”：0.99，“更多反馈”：0.45，“单词”：0.90}；
var ClientName=数据[选择的客户名称]；
var keysdic=Object.keys（ClientName）；
//文件写入（keysdic）；
d3.layout.cloud（）.size（[600600]）
.words（[].concat（keysdic）
.地图（功能（d）{
var wordsize=10+ClientName[d]*40；
结果={text:d，size:wordsize}；
返回结果；
}))
.填充（5）
.rotate（函数（）{return~~（Math.random（）*2）*90；}）
.font（“影响”）
.fontSize（函数（d）{返回d.size；}）
.on（“结束”，抽签）
.start（）；
函数图（字）{
d3.选择（“正文”）.附加（“svg”）
.attr（“填充”，60）
.attr（“宽度”，600）
.attr（“高度”，600）
.附加（“g”）
.attr（“转换”、“翻译（150150）”）
.selectAll（“文本”）
.数据（字）
.enter（）.append（“文本”）
.style（“字体大小”，函数（d）{返回d.size+“px”；}）
.style（“字体系列”、“影响”）
.style（“fill”，函数（d，i）{返回fill（i）；}）
.attr（“文本锚定”、“中间”）
.attr（“转换”，函数（d）{
返回“translate（“+[d.x，d.y]+”）rotate（“+d.rotate+”）”；
})
.text（函数（d）{返回d.text；}）；
}
}
客户名称列表：
名称1
姓名2