d3plus / d3plus-text

A smart SVG text box with line wrapping and automatic font size scaling.
MIT License
105 stars 18 forks source link

Help : Use case with D3 #54

Closed GitHubish closed 7 years ago

GitHubish commented 7 years ago

Hello,

I am trying to make d3plus-text work with my circle packing (d3 v4) but I do not understand how to integrate it. Can you please help me understand how it works so that my texts are wrapped in their container.

Thank you

Actually :

  var text = g.selectAll("text")
    .data(nodes)
    .enter().append("text")
      .attr("class", "label")
      .attr('dy', '.35em')
      .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
      .style("display", function(d) { return d.parent === root ? "inline" : "none"; })
      .text(function(d) { 
            return d.data.name; 
        })
    ;
davelandry commented 7 years ago

Assuming that your nodes array is a hierarchical data array used for the d3 pack layout, your code would probabnly look something like this:

d3plus.textBox()
  .data(data)
  .height(function(d) { return d.r; })
  .select(g.node())
  .text(function(d) { return d.data.name; })
  .textAnchor("middle")
  .verticalAlign("middle")
  .width(function(d) { return d.r; })
  .x(function(d) { return d.x - d.r; })
  .y(function(d) { return d.y - d.r; })
  .render();