如何在d3的气泡图中包装长标签文本？

Question

我正在使用D3版本3，对D3还是很陌生，就像今天是d3的第二天。......我需要执行此项目，将每个类别都放入气泡中。遵循班上的D3代码，教授说，只是更改数据集以使其起作用。...但是我的数据标签太长了，无法容纳在每个气泡中。找到了一些有关如何包装文本的代码，但我不知道如何将其放在那里。 请帮忙~~

这是教授给出的D3版本3代码：

var diameter = 800, //max size of the bubbles
   color = d3.scale.category20(); //color category

var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);

var svg = d3.select("section")
.append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");

d3.csv("data.csv", function(error, data){

//convert numerical values from strings to numbers
data = data.map(function(d){ d.value = +d["Amount"]; return d; });

//bubbles needs very specific format, convert data to this.
var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; });

//setup the chart
var bubbles = svg.append("g")
    .attr("transform", "translate(0,0)")
    .selectAll(".bubble")
    .data(nodes)
    .enter();

//create the bubbles
bubbles.append("circle")
    .attr("r", function(d){ return d.r; })
    .attr("cx", function(d){ return d.x; })
    .attr("cy", function(d){ return d.y; })
    .style("fill", function(d) { return color(d.value); });

//format the text for each bubble
bubbles.append("text")
    .attr("x", function(d){ return d.x; })
    .attr("y", function(d){ return d.y + 5; })
    .attr("text-anchor", "middle")
    .text(function(d){ return d["Item"]; })
    .style({
        "fill":"white", 
        "font-family":"Verdana, san-serif",
        "font-size": "12px"
    });
})

这是我正在使用的data.csv：

Item,Amount
Daily Phone Pick-ups on Average: 183 Counts ,182
Daily Screen Time: 401 minutes,401.4
Daily Walking & Running Distance: 0.188 miles,188.36
Daily Steps: 44 Counts,448
Daily Flights Climbed: 39 Counts,393

非常感谢！！

Answer 1

这是此技术的稍微简化的版本：

bubbles.append("text")
    .attr("x", function(d) {
      return d.x;
    })
    .attr("y", function(d) {
      return d.y + 5;
    })
    .attr("text-anchor", "middle")
    .text(function(d) {
      return d["Item"];
    })
    .style({
      "fill": "white",
      "font-family": "Verdana, san-serif",
      "font-size": "12px"
    })
    .each(wrap);

function wrap(d) {
    var text = d3.select(this),
      width = d.r * 2,
      x = d.x,
      y = d.y,
      words = text.text().split(/\s+/).reverse(),
      word,
      line = [],
      lineNumber = 0,
      lineHeight = 1.1,
      tspan = text.text(null).append("tspan").attr("x", x).attr("y", y);
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + "em").text(word);
      }
    }
}

运行代码：

 <!DOCTYPE html> <html> <head> <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> </head> <body> <section></section> <script> var diameter = 800, //max size of the bubbles color = d3.scale.category20(); //color category var bubble = d3.layout.pack() .sort(null) .size([diameter, diameter]) .padding(1.5); var svg = d3.select("section") .append("svg") .attr("width", diameter) .attr("height", diameter) .attr("class", "bubble"); //d3.csv("data.csv", function(error, data) { var data = [{"Item":"Daily Phone Pick-ups on Average: 183 Counts ","Amount":"182"},{"Item":"Daily Screen Time: 401 minutes","Amount":"401.4"},{"Item":"Daily Walking & Running Distance: 0.188 miles","Amount":"188.36"},{"Item":"Daily Steps: 44 Counts","Amount":"448"},{"Item":"Daily Flights Climbed: 39 Counts","Amount":"393"}]; //convert numerical values from strings to numbers data = data.map(function(d) { d.value = +d["Amount"]; return d; }); //bubbles needs very specific format, convert data to this. var nodes = bubble.nodes({ children: data }).filter(function(d) { return !d.children; }); //setup the chart var bubbles = svg.append("g") .attr("transform", "translate(0,0)") .selectAll(".bubble") .data(nodes) .enter(); //create the bubbles bubbles.append("circle") .attr("r", function(d) { return dr; }) .attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }) .style("fill", function(d) { return color(d.value); }); //format the text for each bubble bubbles.append("text") .attr("x", function(d) { return dx; }) .attr("y", function(d) { return dy + 5; }) .attr("text-anchor", "middle") .text(function(d) { return d["Item"]; }) .style({ "fill": "white", "font-family": "Verdana, san-serif", "font-size": "12px" }) .each(wrap); //}) function wrap(d) { var text = d3.select(this), width = dr * 2, x = dx, y = dy, words = text.text().split(/\\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, tspan = text.text(null).append("tspan").attr("x", x).attr("y", y); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > width) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + "em").text(word); } } } </script> </body> </html>

如何在d3的气泡图中包装长标签文本？

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-12-09 21:55:51

如何在d3的气泡图中包装长标签文本？

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-12-09 21:55:51

解决方案1
2 已采纳 2017-12-09 21:55:51