如何在d3中的鏈接上使文本可編輯

Question

this._link = this._linksEle.selectAll('.link').data(this._links); 

     // enter selection 
     let linkEnter = this._link.enter().append('g') 
      .attr('id', function (d) { 
       var linkObj = d.source['link_' + d.source.id + d.target.id]; 
       return linkObj.id; 
      }) 
      .attr('source', function (d) { 
       return d.source.id; 
      }) 
      .attr('target', function (d) { 
       return d.target.id; 
      }) 
      .attr('class', 'link'); 

     // Enter links 
     linkEnter.append('path') 
      .attr('id', function (d) { 
       return 'linkPath' + d.source.id + d.target.id; 
      }) 
      .attr('class', 'link-path') 
      .style('fill', 'none') 
      .style('stroke', '#ccc') 
      .style('stroke-width', 2) 
      .style('cursor', 'pointer') 
      .attr('marker-end', 'url(#path_arrow)') 
      .on("click", function (d) { 
       self.fnEdgeClick(d); 
      }); 

     linkEnter.append('text').attr('class', 'edge-label') 
      .attr({ 
       'dx': 110, 
       'dy': -5, 
       'font-size': 10, 
       'fill': '#aaa' 
      }) 
      .style('pointer-events', 'none') 
      .append('textPath') 
      .attr('xlink:href', function (d) { 
       return '#linkPath' + d.source.id + d.target.id; 
      }) 
      .style('pointer-events', 'none') 
      .text(function (d) { 
       var linkObj = d.source['link_' + d.source.id + d.target.id]; 
       return linkObj.relation ? linkObj.relation : 'Add relation'; 
      }); 

到目前爲止，我在鏈接上添加了標籤，但其工作正常，但我需要添加功能以使它們可編輯/重命名。但我沒有找到任何相關的例子。任何機構都可以提出一個好的工作示例，以便我可以幫忙。

Answer 1

您可以使用foreignObject來實現SVG內的可編輯文本。

ForeignObject：允許從另一XML命名空間的內容被插入到可縮放矢量圖形（SVG）的命名空間。
更多信息 - 你提供簡化版，任何意義，也顯得非常凌亂https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject

var width = 200, 
 
    height = 200, 
 
    margin = { 
 
    left: 5, 
 
    right: 5, 
 
    top: 5, 
 
    bottom: 5 
 
    }; 
 

 
var chart = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
var data = [{ 
 
    "name": "ken", 
 
    "age": "40" 
 
}, { 
 
    "name": "Jen", 
 
    "age": "40" 
 
}]; 
 

 
chart.selectAll("text") 
 
    .data(data) 
 
    .enter() 
 
    .append("foreignObject") 
 
    .attr("x", 10) 
 
    .attr("y", function(d, i) { 
 
    return (i + 1) + "em" 
 
    }) 
 
    .attr("width", "100%") 
 
    .attr("height", "100%") 
 
    .append('xhtml:div') 
 
    .append('div') 
 
    .attr("contentEditable", true) 
 
    .text(function(d) { 
 
    return d.name 
 
    });

svg { 
 
    border: 1px solid red; 
 
}

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