Question

我想在触发onchange功能时更改单词云。在我目前的下文中，当我从下拉列表中更改选择时，其他图像显示在我的镀铬窗口上，我认为这可能与此类似d3.select("body").append("svg")

如何一次显示一个wordcloud而不是附加到当前窗口？我尝试了d3.select("body") = "svg"，但没有成功，我尝试删除屏幕clear元素的空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>

触发onchange函数时更改单词云

0 个答案: