Question

我正在使用动态气泡图创建可视化。我有它的工作，但我没有浮动工具提示，我只想用它的名称标记每个气泡，我尝试了许多不同的方法，但似乎无法让它工作。任何提示将不胜感激！

window.custom_bubble_chart = (function(d3, CustomTooltip) {
 //"use strict";


     $("#tags").html("");

// Work out chart sizes
var width = $("#tags").width();
var height = $("#tags").height();

 var tooltip = CustomTooltip("gates_tooltip", 180);
 var layout_gravity = -0.01;
 var damper = 0.1;
 var nodes = [];
 var vis, force, circles, radius_scale;

  var center = {x: width / 2, y: height / 2};

 var year_centers = {
  "positive": {x: width / 3, y: height / 2},
  "neutral": {x: width / 2, y: height / 2},
  "negative": {x: 2 * width / 3, y: height / 2}
   };

   var fill_color = d3.scale.ordinal()
              .domain(["low", "medium", "high"])
              .range(["#99cc00", "#ff4444", "#33b5e5"]);

 function custom_chart(data) {


var max_amount = d3.max(data, function(d) { return parseInt(d.freq, 10); } );
radius_scale = d3.scale.pow().exponent(0.5).domain([0, max_amount]).range([2, 25]);

//create node objects from original data
//that will serve as the data behind each
//bubble in the vis, then add each node
//to nodes to be used later
data.forEach(function(d){
  var node = {
    id: d.id,
    radius: radius_scale(parseInt(d.freq, 4)),
    value: d.freq,
    name: d.word,
    group: d.sentiment_adj,
    year: d.sentiment_adj,
    x: Math.random() * 900,
    y: Math.random() * 800
  };
  nodes.push(node);
});

nodes.sort(function(a, b) {return b.value- a.value; });

vis = d3.select("#tags").append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("id", "svg_tags");

circles = vis.selectAll("circle")
             .data(nodes, function(d) { return d.id ;});

circles.enter().append("circle")
  .attr("r", 0)
  .attr("fill", function(d) { return fill_color(d.group) ;})
  .attr("stroke-width", 2)
  .attr("stroke", function(d) {return d3.rgb(fill_color(d.group)).darker();})
  .attr("id", function(d) { return  "bubble_" + d.id; })
  .on("mouseover", function(d, i) {show_details(d, i, this);} )
  .on("mouseout", function(d, i) {hide_details(d, i, this);} );

  //fill circles with text - testing code that doesnt work!
//circles.append("text")
  //.attr("text-anchor", "middle")
 // .attr("dy", ".3em")
 // .text(function(d) { return data.name ; });

circles.transition().duration(2000).attr("r", function(d) { return d.radius; });

 }

 function charge(d) {
return -Math.pow(d.radius, 2.0) / 8;
 }

  function start() {
   force = d3.layout.force()
        .nodes(nodes)
        .size([width, height]);
 }

 function display_group_all() {
  force.gravity(layout_gravity)
     .charge(charge)
     .friction(0.9)
     .on("tick", function(e) {
        circles.each(move_towards_center(e.alpha))
               .attr("cx", function(d) {return d.x;})
               .attr("cy", function(d) {return d.y;});
       });
   force.start();
   hide_years();
 }

 function move_towards_center(alpha) {
   return function(d) {
    d.x = d.x + (center.x - d.x) * (damper + 0.02) * alpha;
     d.y = d.y + (center.y - d.y) * (damper + 0.02) * alpha;
  };
 }

  function display_by_year() {
    force.gravity(layout_gravity)
     .charge(charge)
     .friction(0.9)
    .on("tick", function(e) {
      circles.each(move_towards_year(e.alpha))
             .attr("cx", function(d) {return d.x;})
             .attr("cy", function(d) {return d.y;});
    });
   force.start();
  display_years();
}

  function move_towards_year(alpha) {
return function(d) {
  var target = year_centers[d.year];
  d.x = d.x + (target.x - d.x) * (damper + 0.02) * alpha * 1.1;
  d.y = d.y + (target.y - d.y) * (damper + 0.02) * alpha * 1.1;
   };
}


 function display_years() {
  var years_x = {"Positive": width/3, "Neutral": width / 2, "Negative": width - width/3};
  var years_data = d3.keys(years_x);
  var years = vis.selectAll(".years")
             .data(years_data);

  years.enter().append("text")
               .attr("class", "years")
               .attr("x", function(d) { return years_x[d]; }  )
               .attr("y", 40)
               .attr("text-anchor", "middle")
               .text(function(d) { return d;});

}

function hide_years() {
    var years = vis.selectAll(".years").remove();
 }


 function show_details(data, i, element) {
d3.select(element).attr("stroke", "black");
var content = "<span><b> " + data.name + "</b></span><br/>";
    tooltip.showTooltip(content, d3.event);
}

 function hide_details(data, i, element) {
  d3.select(element).attr("stroke", function(d) { return         d3.rgb(fill_color(d.group)).darker();} );
tooltip.hideTooltip();
 }

  var my_mod = {};
 my_mod.init = function (_data) {
custom_chart(_data);
start();
};

my_mod.display_all = display_group_all;
my_mod.display_year = display_by_year;
my_mod.toggle_view = function(view_type) {
if (view_type == 'year') {
  display_by_year();
} else {
  display_group_all();
  }
};

return my_mod;
 })(d3, CustomTooltip);

Answer 1

您无法在SVG中的形状中添加文本。文本元素需要单独定位。

您有两种选择：

创建一系列<text>元素，并将数据加入到它们中，与圆圈完全分开;或者，
使您加入数据的主要选择包含<g>元素，然后将圆圈和文本添加到组中。

第二个选项使更新变得更容易，但您必须更改更新功能以使用转换进行定位，而不是cx和cy。这是一个tree layout，它为每个节点使用组，每个节点都包含一个圆圈和一个标签。

d3动态气泡图 - 向气泡添加文本

1 个答案: