d3 词云 - 无法在 div 内添加答案

【问题标题】：d3 word cloud - Cannot add inside the divd3 词云 - 无法在 div 内添加
【发布时间】：2014-12-30 08:55:28
【问题描述】：

我正在尝试使用 d3/angularjs 制作仪表板。我被困在将词云添加到 main.html 中。

这是我之前生成的词云。

<div class="main-container" ng-controller="MainCtrl">

<div class="unit-title">
   {{ unit.name }} 
</div>
.......
.......
<div class="col-1-2">
<h1>Word Cloud</h1>
     <script>
  var fill = d3.scale.category20();


// var w = window.innerWidth,
//         h = window.innerHeight;


var jWord = [ "unit", "content", "flipped", "twitter", "learning", "discussion", "material", "topics", "interesting", "good" ];

var jCount = [ "90", "80", "80", "70", "60", "60", "50", "50", "40", "40" ];


  d3.layout.cloud().size([600, 600])
     .words(d3.zip(jWord, jCount).map(function(d) {
  return {text: d[0], size: d[1]};
}))
     
      .padding(5)
      .rotate(function() { return ~~(0.2* 2) * 90; })
      .font("Impact")
      .fontSize(function(d) { return d.size})
      .on("end", draw)
      .start();

  function draw(words) {
    d3.select("body").append("svg")
        .attr("width", 600)
        .attr("height", 600)
        .style('background',"#93A1A1")
      .append("g")
        .attr("transform", "translate(600,600)")
      .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>
</div>
</div>

当我包含到

<div class="main-container" ng-controller="MainCtrl">

<div class="unit-title">
   {{ unit.name }} 
</div>
.......
.......
<div class="col-1-2">
<h1>Word Cloud</h1>
     <script>
  var fill = d3.scale.category20();


// var w = window.innerWidth,
//         h = window.innerHeight;


var jWord = [ "unit", "content", "flipped", "twitter", "learning", "discussion", "material", "topics", "interesting", "good" ];

var jCount = [ "90", "80", "80", "70", "60", "60", "50", "50", "40", "40" ];


  d3.layout.cloud().size([600, 600])
     .words(d3.zip(jWord, jCount).map(function(d) {
  return {text: d[0], size: d[1]};
}))
     
      .padding(5)
      .rotate(function() { return ~~(0.2* 2) * 90; })
      .font("Impact")
      .fontSize(function(d) { return d.size})
      .on("end", draw)
      .start();

  function draw(words) {
    d3.select("body").append("svg")
        .attr("width", 600)
        .attr("height", 600)
        .style('background',"#93A1A1")
      .append("g")
        .attr("transform", "translate(600,600)")
      .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>
</div>
</div>

它不在“class=col-1-2”内

【问题讨论】：

标签： javascript angularjs d3.js nvd3.js angularjs-nvd3-directives

【解决方案1】：

这一行：

d3.select("body").append("svg")

将您正在绘制的 svg 附加到 <body> 标记的末尾。如果要将其附加到该 div 中，只需更改选择器：

d3.select(".col-1-2").append("svg")

例如here。

【讨论】：