[TIL] d3.js text input box 삽입

foreignObject를 이용해 html element를 svg 안에 붙일 수 있다.

 

먼저 붙일 test를 지정하고

const test = d3.select('g')

test에 foreignObject를 append로 붙여주면 된다.

  test.append('foreignObject')
      .attr('x', node.x)
      .attr('y', node.y + 21)
      .attr('width', node.width + 'px')
      .attr('height', '40px')
      .html(function (d) {
        return '<input type="text" value="" />'
      })

 

참고

adding input text box on clicking the data labels d3.js