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>

如何在d3中的链接上编辑文本

1 个答案: