javascript - 如何更改 d3.js 中圆节点的属性？

Question

以下代码显示基于 http://my-neo4j-movies-app.herokuapp.com/ 的图表

现在我想让各个节点对点击事件使用react，类似于 http://bl.ocks.org/d3noob/5141528 ，并在 click() 函数的帮助下增加其大小，但属性不会改变。如果我删除这两行

.append("圆")

.attr("r", 5)

在“node”的变量定义中，代码中断。

<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并捕获第一个带有circle类的东西(圆圈)。

不过你的代码，节点只是一个圆圈。因此，在点击中，只需执行以下操作:

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