d3 word cloud - Cannot add inside the div

Question

I am trying to make a dashboard using d3/angularjs. I am stuck at adding the word cloud into the main.html.

this is the word cloud i generated before.

<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>

when I include the into

<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>

it doesnt come inside the "class=col-1-2"

score 1 · Accepted Answer · answered Dec 30 '14 at 15:07

1

This line:

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

appends the svg you are drawing into to, to the end of the <body> tag. If you want to append it into that div, just change the selector:

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

Example here.

answered Dec 30 '14 at 15:07

Mark

106,305
20
172
230

d3 word cloud - Cannot add inside the div

1 Answers1