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 に答える