D3 oncontextメニューで、選択したノードの色を変更しました

右クリックメニューでノード（矩形）を持っていますが、ノードの色をonclickメニューの結果に応じて変更しようとしていますが、色。私は何が間違っているのかを見るために、コード内でさまざまな方法や試みがあります。 onclick doubleclickを使ったフォーラムはたくさんありますが、oncontextmenuではできません。すべてのヘルプ素晴らしいことと感謝D3 oncontextメニューで、選択したノードの色を変更しました

var node = svg.selectAll("g.node") 
.data(json.nodes) 
.enter().append("g") 
.attr("r", 12) 
.attr("class", "node") 
.attr("class", "gLink") 
.call(node_drag) 
.on('contextmenu', function(d,i) { 
     d3.selectAll('.context-menu').data([1]) 
     .enter() 
     .append('div') 
     .attr('class', 'context-menu'); 
     // close menu 
     d3.select('body').on('click.context-menu', function() { 
     d3.select('.context-menu').style('display', 'none'); 
     }); 
     // this gets executed when a contextmenu event occurs 
     d3.selectAll('.context-menu') 
     .html('') 
     .append('ul') 
     .selectAll('li') 
      .data(actions).enter() 
      .append('li') 

     .on('click' , function(d) { 

      if (d=="Force Succeed"){ 
       alert(d); 
       d3.select(".node").style("fill", "#000"); 
      } 
      else if (d=="Start Node"){ 
     alert(d); 
       d3.select(this).style("fill", "#000000"); 
      } 
    else if (d=="Start Tree"){ 
       alert(d); 
       d3.select(this).style("fill", "#000"); 
      } 
    else { 
       alert(d); 
       d3.select(this).style("fill", "#000"); 
      } 
      }) 
      .text(function(d) { return d; }); 
     d3.select('.context-menu').style('display', 'none'); 
     // show the context menu 
     d3.select('.context-menu') 
     .style('left', (d3.event.pageX - 2) + 'px') 
     .style('top', (d3.event.pageY - 2) + 'px') 
     .style('display', 'block'); 
     d3.event.preventDefault(); 
    }); 



node.append("svg:rect") 
    .attr("x", function(d) { return -1 * (d.name.length * 10)/2 }) 
    .attr("y", -15) 
    .attr("rx", 5) 
    .attr("ry", 5) 
    .attr("width", function(d) { return d.name.length * 10; }) 
    .attr("height", 20) 
    .style("fill", "#FFF") 
    .style("stroke", "#6666FF");

出典

2016-04-22 user2462320

お願いjsfiddle link –

あなたのコードからは、 'this'のコンテキストが変更されたため、' d3.select（this）.style（...） 'ステートメントが動作していない可能性があります。 clickイベントは 'li'要素に束縛されているので、' this'は 'li'要素を参照しますが、' rect'の塗りつぶしを設定したいと思うでしょう。 – JSBob

私はそれほど分かりませんでした： - /ノードはどうすれば得られますか？私はそれをjsfiddleに載せようとしていますが、残念ながら私と協力していません。私はそれを立てようとし続けます。一歩戻ってノードを取得するにはどのような構文がありますか？ – user2462320

ちょうどコンテキストメニューのために右クリックしたオブジェクトへの参照を保持します：

.on('contextmenu', function(d, i) { 

    var self = d3.select(this); //<-- keep this reference 

    d3.selectAll('.context-menu').data([1]) 
    .enter() 

    ... 

    .on('click', function(d) { 
     if (d == "Force Succeed") { 
     self.style("fill", "green"); //<-- use it later 

    ...

はここにあなたのコードから推定し、機能的な例ですスニペット：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var svg = d3.select('body') 
 
     .append('svg') 
 
     .attr('width', 500) 
 
     .attr('height', 500); 
 

 
    var json = {}; 
 
    json.nodes = [ 
 
     0, 1, 2, 3 
 
    ]; 
 
    
 
    var actions = ["Force Succeed", "Start Node", "Start Tree"]; 
 

 
    var node = svg.selectAll("g.node") 
 
     .data(json.nodes) 
 
     .enter().append("circle") 
 
     .attr("r", 12) 
 
     .attr("cx", function(d){ 
 
     return d * 30 + 15; 
 
     }) 
 
     .attr("cy", 15) 
 
     .on('contextmenu', function(d, i) { 
 
     
 
     var self = d3.select(this); 
 
     
 
     d3.selectAll('.context-menu').data([1]) 
 
      .enter() 
 
      .append('div') 
 
      .attr('class', 'context-menu'); 
 
     // close menu 
 
     d3.select('body').on('click.context-menu', function() { 
 
      d3.select('.context-menu').style('display', 'none'); 
 
     }); 
 
     // this gets executed when a contextmenu event occurs 
 
     d3.selectAll('.context-menu') 
 
      .html('') 
 
      .append('ul') 
 
      .selectAll('li') 
 
      .data(actions).enter() 
 
      .append('li') 
 

 
     .on('click', function(d) { 
 
      if (d == "Force Succeed") { 
 
       self.style("fill", "green"); 
 
      } else if (d == "Start Node") { 
 
       self.style("fill", "red"); 
 
      } else if (d == "Start Tree") { 
 
       self.style("fill", "blue"); 
 
      } else { 
 
       self.style("fill", "#000"); 
 
      } 
 
      }) 
 
      .text(function(d) { 
 
      return d; 
 
      }); 
 
     d3.select('.context-menu').style('display', 'none'); 
 
     // show the context menu 
 
     d3.select('.context-menu') 
 
      .style('left', (d3.event.pageX - 2) + 'px') 
 
      .style('top', (d3.event.pageY - 2) + 'px') 
 
      .style('display', 'block') 
 
      .style('position', 'absolute'); 
 
     d3.event.preventDefault(); 
 
     }); 
 

 
    node.append("svg:rect") 
 
     .attr("x", function(d) { 
 
     return -1 * (3 * 10)/2 
 
     }) 
 
     .attr("y", -15) 
 
     .attr("rx", 5) 
 
     .attr("ry", 5) 
 
     .attr("width", function(d) { 
 
     return 3 * 10; 
 
     }) 
 
     .attr("height", 20) 
 
     .style("fill", "#FFF") 
 
     .style("stroke", "#6666FF"); 
 
    </script> 
 
</body> 
 

 
</html>

出典

2016-04-22 18:08:53 Mark

ありがとうございます！それはうまくいった！ :) – user2462320

D3 oncontextメニューで、選択したノードの色を変更しました

答えて

関連する問題