d3plus / d3plus-text

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

detect data from pre-existing DOM elements #105

Closed wheelerlaw closed 5 years ago

wheelerlaw commented 5 years ago

The API for textwrap was far simpler in the previous iteration of d3plus, as it worked with existing elements whose dimensions were already defined. d3plus 2.0 adds unneeded complexity for wrapping text, and it does not seem to work with existing text elements.

This was how simple it was to wrap text using d3plus:

d3plus.textwrap()
    .container(d3.select("#rectWrap"))
    .draw();

Given how already difficult text wrapping in SVG is, the departure from an API that is as simple as that seems like the wrong direction.

I'm requesting that the old but simpler API be ported into d3plus 2.0.

davelandry commented 5 years ago

@wheelerlaw I agree, the old 1.0 logic of detecting the size, positioning, and text of a label based on the DOM structure was super handy. I don't have the capacity right now to port it over, but ideally the logic would be:

If the data passed to textWrap is an HTMLELement or D3Selection:

  1. Analyze the shape to determine the width, height, x, and y properties
  2. Analyze any available sibling <text> element to determine the text and any inline font styles

The old logic for parsing the size can be found here, and the old logic for text is here. These are both used here. The old code is in coffeescript 😒

Consider these either notes for my future self, or guidance for someone to make a PR 🍻

wheelerlaw commented 5 years ago

Super! If I have some spare cycles, I could take a stab at it. Perhaps this weekend.

davelandry commented 5 years ago

duplicate of #6