d3.js + SoundCloud APIの使用 - トラックタイトルを表示する必要があります

Question

私はSoundCloud APIでd3.jsを使用しています。バブルの中にトラックタイトルを表示するバブルグラフを作成したいと思います。

ページが「サークル」要素に読み込まれると、HTMLで表示されます。しかし、私はなぜ彼らが表示されていないか分からない。

と、トラックタイトルを表示するバブルグラフを作成しようとしています。

私はここで見ることができやっているものの例： http://butchershopcreative.github.com/ui-experiments/soundcloud/example/

コードは次のようになります。

SC.initialize({ 
    client_id: "7kIeyF5f2ETFo1fEWKwNQ", 
    redirect_uri: "http://localhost:8000/soundcloud/example/", 
}); 

SC.get("/tracks?genres=dubstep&order=hotness", {limit: 100}, function(tracks){ 
    var svg = d3.select("#chart").append("svg") 
     .attr("width", 640) 
     .attr("height", 480); 
    var y = 500; 
    var x = 1000; 
    var circle = svg.selectAll("circle") 
     .data(tracks) // data binds information to the circles 
    .enter().append("circle").transition() // Added transitions 
     .duration(1000) 
     .delay(function(d, i) { return i * 10; }) 
     .attr("r", function(d) { return Math.sqrt(d * scale); }) 
     .style("fill", "steelblue") 
     .style("stroke","#000") 
     .style("stroke-width", "3px") 
     .attr("class", "track") 
     .attr("cx", function() { 
      return Math.random() * x;}) // produces random x position 
     .attr("cy", function() { 
      return Math.random() * y;}) // produces random y position 
     .attr("r", 50) 
     .text(function(track) { 
      console.log(track); 
      return track.title; 
     }); 
}); 

Answer 1

問題は、あなたがテキストのcircle要素を使用していることです。 SVG text要素を使用していて、円とテキストをg要素にグループ化します。そう（enter()とupdateコードを分離する）よう

：

var bubble = svg.selectAll(".bubble") 
    .data(tracks) // data binds information to the bubbles 

bubble.enter().append("svg:g") 
    .attr("class", "bubble"); 

bubble.append("svg:circle") 
    .attr("r", function(d) { return Math.sqrt(d * scale); }) 
    .style("fill", "steelblue") 
    .style("stroke","#000") 
    .style("stroke-width", "3px") 
    .attr("class", "track") 
    .attr("cx", function() { 
    return Math.random() * x;}) // produces random x position 
    .attr("cy", function() { 
    return Math.random() * y;}) // produces random y position 
    .attr("r", 50); 

bubble.append("svg:text") 
    .text(function(track) { 
    return track.title; 
    });