Question

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

的图表

现在我想让单个节点对点击事件做出反应，类似于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

在你的第二个例子中，＆＃34;节点＆＃34;是一个g元素，其圆圈和文字如下：

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

所以点击中的代码：

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

正在说选择g并抓住第一个用圆圈（圆圈）。

您的代码虽然，节点只是一个圆圈。因此，在点击中，只需执行此操作：

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

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

1 个答案: