javascript – 在D3中包装文本

前端之家收集整理的这篇文章主要介绍了javascript – 在D3中包装文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想让文本包装在以下D3树上,而不是
  1. Foo is not a long word

每条线都被包裹起来

  1. Foo is
  2. not a
  3. long word

我已经尝试使文本为“foreignObject”而不是文本对象,文本确实包含,但它不会在树动画上移动,并且都分组在左上角.

代码位于

http://jsfiddle.net/mikeyai/X43X5/1/

使用Javascript:

  1. var width = 960,height = 500;
  2.  
  3. var tree = d3.layout.tree()
  4. .size([width - 20,height - 20]);
  5.  
  6. var root = {},nodes = tree(root);
  7.  
  8. root.parent = root;
  9. root.px = root.x;
  10. root.py = root.y;
  11.  
  12. var diagonal = d3.svg.diagonal();
  13.  
  14. var svg = d3.select("body").append("svg")
  15. .attr("width",width)
  16. .attr("height",height)
  17. .append("g")
  18. .attr("transform","translate(10,10)");
  19.  
  20. var node = svg.selectAll(".node"),link = svg.selectAll(".link");
  21.  
  22. var duration = 750,timer = setInterval(update,duration);
  23.  
  24. function update() {
  25. if (nodes.length >= 500) return clearInterval(timer);
  26.  
  27. // Add a new node to a random parent.
  28. var n = {id: nodes.length},p = nodes[Math.random() * nodes.length | 0];
  29. if (p.children) p.children.push(n); else p.children = [n];
  30. nodes.push(n);
  31.  
  32. // Recompute the layout and data join.
  33. node = node.data(tree.nodes(root),function(d) { return d.id; });
  34. link = link.data(tree.links(nodes),function(d) { return d.source.id + "-" + d.target.id; });
  35.  
  36. // Add entering nodes in the parent’s old position.
  37. node.enter().append("text")
  38. .attr("class","node")
  39. .attr("x",function(d) { return d.parent.px; })
  40. .attr("y",function(d) { return d.parent.py; })
  41. .text('Foo is not a long word');
  42.  
  43. // Add entering links in the parent’s old position.
  44. link.enter().insert("path",".node")
  45. .attr("class","link")
  46. .attr("d",function(d) {
  47. var o = {x: d.source.px,y: d.source.py};
  48. return diagonal({source: o,target: o});
  49. });
  50.  
  51. // Transition nodes and links to their new positions.
  52. var t = svg.transition()
  53. .duration(duration);
  54.  
  55. t.selectAll(".link")
  56. .attr("d",diagonal);
  57.  
  58. t.selectAll(".node")
  59. .attr("x",function(d) { return d.px = d.x; })
  60. .attr("y",function(d) { return d.py = d.y; });
  61. }

解决方法

您可以修改 Mike Bostock’s “Wrapping Long Labels” example添加< tspan>元素到您的< text>节点.将包装文本添加到您的节点需要两个主要更改.我没有深入了解文本在过渡期间更新其位置,但不应该太难添加.

第一个是在上面的例子中添加一个基于函数函数换行符. wrap将负责添加< tspan>元素使您的文字适合一定宽度:

  1. function wrap(text,width) {
  2. text.each(function () {
  3. var text = d3.select(this),words = "Foo is not a long word".split(/\s+/).reverse(),word,line = [],lineNumber = 0,lineHeight = 1.1,// ems
  4. x = text.attr("x"),y = text.attr("y"),dy = 0,//parseFloat(text.attr("dy")),tspan = text.text(null)
  5. .append("tspan")
  6. .attr("x",x)
  7. .attr("y",y)
  8. .attr("dy",dy + "em");
  9. while (word = words.pop()) {
  10. line.push(word);
  11. tspan.text(line.join(" "));
  12. if (tspan.node().getComputedTextLength() > width) {
  13. line.pop();
  14. tspan.text(line.join(" "));
  15. line = [word];
  16. tspan = text.append("tspan")
  17. .attr("x",x)
  18. .attr("y",y)
  19. .attr("dy",++lineNumber * lineHeight + dy + "em")
  20. .text(word);
  21. }
  22. }
  23. });
  24. }

第二个变化是,不需要设置每个节点的文本,您需要为每个节点调用换行符:

  1. // Add entering nodes in the parent’s old position.
  2. node.enter().append("text")
  3. .attr("class","node")
  4. .attr("x",function (d) { return d.parent.px; })
  5. .attr("y",function (d) { return d.parent.py; })
  6. .call(wrap,30); // wrap the text in <= 30 pixels

猜你在找的JavaScript相关文章