为什么添加新行时d3组中的textarea会改变位置？

Question

编辑： 因此，如果我设置“.style（”溢出“，”隐藏“），那么它就不会发生。很奇怪。

所以我的问题，我已经将一个textarea添加到foreignObject，这个foreignObject是d3组的一部分，当你向textarea添加新行时，它会改变位置。我该如何解决这个问题？在这里你可以看到我在说什么（输入2或3次）https://jsfiddle.net/jcbujyyg/2/

原始代码：

var svg = d3.select("body").append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 960 600")
.attr("width", "100%")
.attr("height", "100%")
.attr("style", "outline: thin solid black;")
.style("background-color", "#f4f3f1");


var group = svg.append('g')
    .datum({x: 0, y: 0});

group.append("rect")
    .data([{x: 200, y: 200, width: 400, height: 200}])
    .attr("id", "base")
    .attr("x", function (d) {return d.x;})
    .attr('y', function (d) {return d.y;})
    .attr('width', function (d) {return d.width;})
    .attr('height', function (d) {return d.height;})
    .attr("fill", "skyblue");

var inp = group.append("foreignObject")
            .attr('x', 200)
    .attr( 'y', 200)
    .append("xhtml:body")
    .attr('xmlns','http://www.w3.org/1999/xhtml')
    .append('textarea')
    .style("font-size" , "20px")

在

在