React

by fschwiet

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="es" id="2d98a6aeade943e0a773f4447f0c8477-0" class="displacy" width="4100" height="587.0" direction="ltr" style="max-width: none; height: 587.0px; color: #000000; background: #ffffff; font-family: Arial; direction: ltr">
<text class="displacy-token" fill="currentColor" text-anchor="middle" y="497.0">
    <tspan class="displacy-word" fill="currentColor" x="50">Y</tspan>
    <tspan class="displacy-lemma" dy="2em" fill="currentColor" x="50">Y</tspan>
    <tspan class="displacy-tag" dy="2em" fill="currentColor" x="50">CCONJ</tspan>
</text>

<text class="displacy-token" fill="currentColor" text-anchor="middle" y="497.0">
    <tspan class="displacy-word" fill="currentColor" x="200">para</tspan>
    <tspan class="displacy-lemma" dy="2em" fill="currentColor" x="200">parir</tspan>
    <tspan class="displacy-tag" dy="2em" fill="currentColor" x="200">ADP__AdpType=Prep</tspan>
</text>

<text class="displacy-token" fill="currentColor" text-anchor="middle" y="497.0">
    <tspan class="displacy-word" fill="currentColor" x="350">colmo</tspan>
    <tspan class="displacy-lemma" dy="2em" fill="currentColor" x="350">colmar</tspan>
    <tspan class="displacy-tag" dy="2em" fill="currentColor" x="350">NOUN</tspan>
</text>

<text class="displacy-token" fill="currentColor" text-anchor="middle" y="497.0">
    <tspan class="displacy-word" fill="currentColor" x="500">ese</tspan>
    <tspan class="displacy-lemma" dy="2em" fill="currentColor" x="500">ese</tspan>
    <tspan class="displacy-tag" dy="2em" fill="currentColor" x="500">DET__Gender=Masc|Number=Sing|PronType=Dem</tspan>
</text>

<text class="displacy-token" fill="currentColor" text-anchor="middle" y="497.0">
    <tspan class="displacy-word" fill="currentColor" x="650">proceso</tspan>
    <tspan class="displacy-lemma" dy="2em" fill="currentColor" x="650">procesar</tspan>
    <tspan class="displacy-tag" dy="2em" fill="currentColor"...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 150px;
  grid-auto-rows: minmax(150px, auto);
}

React

var tagNodes = document.querySelectorAll("tspan.displacy-tag");

var firstOffset = tagNodes[0].getAttribute("x");
var secondOffset = tagNodes[1].getAttribute("x");
var firstWidth = secondOffset - firstOffset;

console.log(firstWidth)

var children = [];

for(var i = 0; i < tagNodes.length; i++) {
  var child = {
  	text: tagNodes[i].innerHTML,
    position: (tagNodes[i].getAttribute("x")-firstOffset) / firstWidth
  };
  console.log(child)
  children.push(child)
}


class ColumnsApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: children
    }
  }
  
  render() {
    return (
      <div style={{display:"absolute"}} width={firstWidth*this.state.items.length}>
        {this.state.items.map((item, index) => (
          <div key={index} x={item.position * firstWidth}>

              <span>{item.text}</span>
          </div>
        ))}
      </div>
    )
  }
}

ReactDOM.render(<ColumnsApp />, document.querySelector("#app"))