Question

我需要在将d3-foreignObject（textarea）添加到组后更改其xy位置。拖动它很简单，我做：

d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")");

但是如何手动更改位置？我尝试设置.attr（x，100），但没有任何反应。可以请有人帮助我。

Answer 1

您的代码问题（在您关联的jsfiddle中）是text是<textarea> HTML元素的选择，而不是foreignObject的选择。因此，您在x属性中所做的任何更改实际上都会应用于<textarea>。

解决方案：打破链条，text只选择foreignObject。看看下面的演示：

var svg = d3.select("body").append('svg')
  .attr('width', 500)
  .attr('height', 200)
  .attr('style', 'outline: thin solid black;')
  .style('background-color', '#f4f3f1');

var grp = svg.append("g")
  .datum({
    x: 0,
    y: 0
  })
  .attr("class", "group");

var text = grp.append("foreignObject")
  .datum({
    x: 50,
    y: 50,
    width: 100,
    height: 100
  })
  .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;
  });

var textarea = text.append("xhtml:body")
  .attr('xmlns', 'http://www.w3.org/1999/xhtml')
  .append('textarea')
  .attr("id", "text")
  .style("width", 100 + "px")
  .style("height", 100 + "px")
  .property("value", "This foreign object doesn't stop!")
  .style("text-align", "center");

move();

function move() {
  text.transition()
    .duration(1000)
    .attr("x", 350)
    .transition()
    .duration(1000)
    .attr("x", 50)
    .each("end", move)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

是否可以在创建d3-foreignObject之后更改其xy-position？

1 个答案: