just another inlet to tributary

inlet.js

width = 242
height = 221


rect = g.append("g").attr("width",width).attr("height",height).attr("fill","red")
rect.append("rect").attr("width",width).attr("height",height).attr("fill","red")
text = g.append("text").text("Hallo Man Wie gehts es dir. Hallo Man Wie gehts es dir. Hallo Man Wie gehts es dir. ")
		.attr("dominant-baseline","text-before-edge")
        .attr('y',100)
wrapGroupInMaskWidthFadeOut = (box,selection) =>
  
  height = parseInt(box.attr("height"))
  
  defs = d3.select("svg").append("defs")
  
  gradient = defs.append('linearGradient')
      .attr('id','fadeout')
      .attr('gradientUnits','userSpaceOnUse')
      .attr('x1','0%')
      .attr('x2','0%')
      .attr('y1','0%')
      .attr('y2',height)
   
  gradient.append('stop')
      .attr('stop-color',"#FFFFFF")
      .attr('offset',80+'%')
      
  gradient.append('stop')
      .attr('stop-color',"#FFFFFF")
      .attr('offset',85+'%')
  
  
  gradient.append('stop')
      .attr('stop-color',"#000000")
      .attr('offset',100+'%')    
          
  mask = defs.append("mask").attr("id","fadeOutMask")
  
  mask.append("rect").attr("width",width).attr("height",height).attr("fill","url(#fadeout)")
  
  new_group = g.append("g").attr("mask","url(#fadeOutMask)")
  elem = selection.node().cloneNode(true)
    
  selection.remove()
  new_group.node().appendChild(elem)
   
  return new_group

wrapTextToBoxWidth = (box,text,line_height = 22,padding=30) =>
        
        width  = parseInt(box.attr("width"))
        height = parseInt(box.attr("height"))
		
        text_string = text.text()
        text.text("") #Empty the old text
        test_text_container = box.append("text") 
        
        textArray  = text_string.split(" ")
        tspan      = text.append("tspan")
        tspan_copy = test_text_container.append("tspan")
        textSoFar  = undefined
        for pText in textArray

          textSoFar = tspan_copy.text()
          tspan_copy.text textSoFar + " " + pText
          textLength = tspan_copy.node().getComputedTextLength()
          
          if textLength >= (width - padding)
            tspan = text.append("tspan").attr("dy", line_height).attr("x", 0)
            tspan_copy.text('') 
		
          textSoFar = tspan.text()
          tspan.text textSoFar + " " + pText
        test_text_container.remove()  
        return text 
          
text = wrapTextToBoxWidth(rect, text) 
#wrapGroupInMaskWidthFadeOut(rect,text)