如何更改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");