1

我正在尝试使用 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”之内

4

1 回答 1

1

这一行：

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

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

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

这里的例子。

于 2014-12-30T15:07:11.957 回答