如何更改d3.js中圓形節點的屬性？

Question

下面的代碼顯示基於http://my-neo4j-movies-app.herokuapp.com/

現在我要讓各個節點反應單擊事件，類似http://bl.ocks.org/d3noob/5141528，並增加thier大小與點擊（）函數的幫助圖形，但屬性沒有按」改變。如果刪除了兩行

.append（ 「圓圈」）

.attr（ 「R」，5）

在 '節點' 的碼符的變量定義

。

<script type="text/javascript"> 
var width = screen.width, height = screen.height; 
var force = d3.layout.force().charge(-200).linkDistance(30) 
.size([width, height]); 
var svg = d3.select("#graph").append("svg") 
     .attr("width", "100%").attr("height", "100%") 
     .attr("pointer-events", "all"); 

d3.json("/graph", function(error, graph) { 
    if (error) return; 

    force.nodes(graph.nodes).links(graph.links).start(); 

    var link = svg.selectAll(".link") 
      .data(graph.links).enter() 
      .append("line").attr("class", "link"); 
    var node = svg.selectAll(".node") 
      .data(graph.nodes).enter() 
      .append("circle") 
      .attr("r", 5) 
      .attr("class", function (d) { return "node "+d.label }) 
      .on("click", click) 
      .call(force.drag); 

    // add the nodes 
    node.append("circle").attr("r", 5); 
    // html title attribute 
    node.append("title").text(function (d) { return d.title; }); 
    // force feed algo ticks 
    force.on("tick", function() { 
     link.attr("x1", function(d) { return d.source.x; }) 
       .attr("y1", function(d) { return d.source.y; }) 
       .attr("x2", function(d) { return d.target.x; }) 
       .attr("y2", function(d) { return d.target.y; }); 
     node.attr("cx", function(d) { return d.x; }) 
       .attr("cy", function(d) { return d.y; }); 
    }); 

    // action to take on mouse click 
    function click() { 
     console.log(d3.select(this)); 
      d3.select(this).select(".circle") 
      .attr("r", 26) 
      .style("fill", "lightsteelblue"); 
    } 

}); 

Answer 1

在第二個例子中， 「節點」 是g元素以圓弧和文字是這樣的：

<g> 
    <circle /> 
    <text>some text</text> 
</g> 

所以這段代碼在點擊：

d3.select(this).select(".circle") 

是說選擇g和第一件事類班（圓）。

雖然你的代碼，該節點只是一個圓圈。因此，在點擊中，只需執行以下操作：

d3.select(this) 
    .attr("r", 26) 
    .style("fill", "lightsteelblue");