1

我将 d3.js 与 SoundCloud API 一起使用。我想创建一个气泡图，它将在气泡中显示曲目标题。

一旦页面加载到“圆圈”元素中，它们就会显示在 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文本元素。您应该使用 SVGtext元素，我会将圆圈和文本组合在一个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 回答