1

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

ページが「circle」要素に読み込まれると、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; 
      });
});
4

1 に答える 1

0

問題は、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; 
  });
于 2012-10-03T14:33:00.200 に答える