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; 
    });