在 D3 svg 节点中添加外部对象作为 React 组件

Question

I am working on a D3 React requirement where in if user clicks on a rectangle on svgm an input box is provided for text. I want to use that input for updating another component in react app. How do I do that using foreign object in svg. Is there any other way I can link a text box with a rectangle(drawn just above each rectangle) in d3 in React.

My existing code snippet is here

 d3.select('svg#target').append("g").selectAll("whatever").data([1,2,3,4]).enter().append("rect").attr("x", function(d, i) { var x = 200 * Math.sin(-60 * i * (Math.PI / 180)); return x - 50; }).attr("y", function(d, i) { var y = 200 * Math.cos(-60 * i * (Math.PI / 180)); return y - 20; }).attr("width", 100).attr("height", 40).attr("fill", "gray").on("click", function(d, i) { const count = i; d3.select(this).append("foreignObject").attr("x", function() { return 300 * Math.sin(-60 * i * (Math.PI / 180)) + 50; }).attr("y", function() { return 280 * Math.cos(-60 * i * (Math.PI / 180)); }).attr("width", 140).attr("height", 20).html(function(d, i) { return ( '<input type="text" id="attribute' + count + 'value="Text goes here" />' ); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg viewbox="-250 -250 500 500" width="400" id="target"></svg>

Answer 1

You were pretty close, you only need to change it so that the foreign object is not appended inside the <rect /> , but rather inserted as a sibling, like:

<g>
  <rect x="-50" y="180" width="100" height="40" fill="gray"> 
  </rect>
  <rect x="-223.20508075688772" y="80.00000000000003" width="100" height="40" fill="gray">
  </rect>
  <rect x="-223.20508075688775" y="-119.99999999999996" width="100" height="40" fill="gray">
  </rect>
  <rect x="-50.0" y="-220" width="100" height="40" fill="gray">
  </rect>

  <foreignObject x="-50.0" y="-220" width="100" height="40">
    <input type="text" id="attribute3" value="text goes here">
  </foreignObject>
</g>

We can do this with this on line 24: d3.select(this.parentNode) which selects the parent, so now when we append, it becomes a sibling of the <rect /> , rather than a child.

 d3.select('svg#target').append("g").selectAll("whatever").data([1,2,3,4]).enter().append("rect").attr("x", function(d, i) { var x = 200 * Math.sin(-60 * i * (Math.PI / 180)); return x - 50; }).attr("y", function(d, i) { var y = 200 * Math.cos(-60 * i * (Math.PI / 180)); return y - 20; }).attr("width", 100).attr("height", 40).attr("fill", "gray").on("click", function(d, i) { const count = i; if (document.getElementById('attribute' + count)){ return 0; } d3.select(this.parentNode).append("foreignObject").attr("x", function() { var x = 200 * Math.sin(-60 * i * (Math.PI / 180)); return x - 50; }).attr("y", function() { var y = 200 * Math.cos(-60 * i * (Math.PI / 180)); return y - 20; }).attr("width", 100).attr("height", 40).html(function(d, i) { return ( `<input type="text" id="attribute${count}" style="height: 40px;" value="Text goes here" />` ); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg viewbox="-250 -250 500 500" width="400" id="target"></svg>

Demo: