3

我在具有类名画布的 div 元素中创建 d3 图形，如下所示：

var width  = 960,
    height = 450,
    colors = d3.scale.category10();

var svg = d3.select('.canvas').append('svg').attr('width', width).attr('height', height).style('background-color', '#cccccc');

我正在使用强制布局，如下所示：

var nodes = [],
  lastNodeId = -1,
  links = [];

// init D3 force layout
var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .size([width, height])
    .linkDistance(100)
    .linkStrength(1)
    .charge(-500)
    .on('tick', tick)

我添加矩形节点如下：

var circle = svg.append('svg:g').selectAll('g');

circle = circle.data(nodes, function(d) { return d.id; });

// update existing nodes 
circle.selectAll('circle')
      .style('fill', 'LightGreen');

// add new nodes
var g = circle.enter().append('svg:g');

g.append('svg:rect')
  .attr('class', 'node')
  .attr('width', 50)
  .attr('height', 50)
  // Adding double click event handler for the node. If the user double clicks on a link,
  // then a window prompt is displayed in which the user inputs the new text for the label.
  // This way the user can change a label text.
  .on('dblclick', function(d) {
var newText = window.prompt("Enter the new node text", "");

d3.select(this).select('text')
      .text(function(d){
    return newText;
      })
})

默认情况下，我将节点 ID 作为文本。

var g = circle.enter().append('svg:g'); 
// show node IDs 
g.append('svg:text') 
 .attr('x', 25) 
 .attr('y', 25) 
 .attr('class', 'id') 
 .text(function(d) {return d.id;});

如您所见，我为节点添加了双击处理程序。其中代码提示用户输入节点的新文本并将文本放入节点中。但问题是我没有看到节点文本发生变化。请让我知道要编写什么代码以更改节点文本。该方法是否也适用于更改链接（节点之间）文本？

我创建链接如下：

var path = svg.append('svg:g').selectAll('path');
path = path.data(links);

    linkLabels = svg.selectAll("link").data(links).enter()
           .append("text")
           .attr("x", function(d) { return d.source.x + (d.target.x - d.source.x)/2; })
           .attr("y", function(d) { return d.source.y + (d.target.y - d.source.y)/2; })
           .text(function(d) { return (d.source.id + "-" + d.target.id); });

  // add new links
 var edges =  path.enter().append('svg:path')
                  .attr('class', 'link')
                   // Adding double click event handler for the link. If the user double clicks on a link,
           // then a window prompt is displayed in which the user inputs the new text for the label.
           // This way the user can change a label text.
                   .on('dblclick', function(d) {
            var newText = window.prompt("Enter the new label text", d.label);

            d3.select(this.parentEdge).select('text')
                       .text(function(d){
                            return newText;
                    })
                   });

双击链接但链接文本没有更改时，我会看到提示。

4

1 回答 1

3

问题是text没有附加到接收点击事件的元素，而是它的父节点，因此您需要选择父节点，然后选择text元素：

d3.select(this.parentNode).select("text")
于 2014-04-16T13:23:43.730 回答