我有一个 d3 api，其中我显示数字之间的关系我正在使用 servlet 以 json 格式获取数据。现在我希望当我单击某个节点时它的大小会更大。我有看到了一个这样的例子，我也试着把它放在我的 api 中，但它不能正常工作。我发布了我的代码和那个例子的链接。

这是我的代码..

<script>


                    var links = [];
                    var nodes = {};

                    // Compute the distinct nodes from the links.

                    var width = 960, height = 500;
                    function loadNewData(){
                        var svg = d3.select("#linkAnalysis").append("svg").attr("width", width).attr(
                        "height", height);

                        // Per-type markers, as they don't inherit styles.
                        svg.append("defs").selectAll("marker").data(
                        [ "suit", "licensing", "resolved" ]).enter().append("marker")
                        .attr("id", function(d) {
                            return d;
                        }).attr("viewBox", "0 -5 10 10").attr("refX", 15).attr("refY",
                            -1.5).attr("markerWidth", 6).attr("markerHeight", 6)
                        .attr("orient", "auto").append("path").attr("d",
                        "M0,-5L10,0L0,5");


                        d3.json(
                        "DirectedServlet",
                        function(error, directed) {

                            links=directed.links;


                            links.forEach(function(link) {
                                link.source = nodes[link.source]
                                    || (nodes[link.source] = {
                                    name : link.source
                                });
                                link.target = nodes[link.target]
                                    || (nodes[link.target] = {
                                    name : link.target
                                });
                            });

                            var force = d3.layout.force().nodes(
                            d3.values(nodes)).links(links).size(
                            [ width, height ]).linkDistance(60).charge(
                                -300).on("tick", tick).start();

                            var path = svg.append("g").selectAll("path").data(
                            force.links()).enter().append("path").attr(
                            "class", function(d) {
                                return "link " + d.type;
                            }).attr("marker-end", function(d) {
                                return "url(#" + d.type + ")";
                            });

                            var circle = svg.append("g").selectAll("circle")
                            .data(force.nodes()).enter().append(
                            "circle").attr("r", 6).call(d3.behavior.drag().origin(function(d) {
                                return d;
                            }).on("drag", function(d) {
                                d.x = d3.event.x, d.y = d3.event.y;
                                d3.select(this).attr("cx", d.x).attr("cy", d.y);

                                link.filter(function(l) {
                                    return l.source === d;
                                }).attr("x1", d.x).attr("y1", d.y);

                                link.filter(function(l) {
                                    return l.target === d;
                                }).attr("x2", d.x).attr("y2", d.y);
                            }));
                            circle.append("title").text(function(d){

                                return d.name;
                            });


                            var text = svg.append("g").selectAll("text").data(
                            force.nodes()).enter().append("text").attr(
                            "x", 8).attr("y", ".31em").text(
                            function(d) {
                                return d.name;
                            });

                            //selection is happening 
                            var selected = circle.filter(function(d) {
                                return d.name;
                            });

                            selected.each(function(d) {
                                // d contains the data for the node and this is the circle element

                                console.log(d.name);
                            });




                            var circle = svg.append("g").selectAll("circle")
                            .data(force.nodes()).enter().append(
                            "circle").attr("r", 6).on("click",
                            clickfn).call(force.drag().on("dragstart",dragstart));

                            var clickfn = function(circle) {
                                alert();
                            }



                            // Use elliptical arc path segments to doubly-encode directionality.
                            function tick() {
                                path.attr("d", linkArc);
                                circle.attr("transform", transform);
                                text.attr("transform", transform);
                            }

                            function linkArc(d) {
                                var dx = d.target.x - d.source.x, dy = d.target.y
                                    - d.source.y, dr = Math.sqrt(dx * dx
                                    + dy * dy);
                                return "M" + d.source.x + "," + d.source.y
                                    + "A" + dr + "," + dr + " 0 0,1 "
                                    + d.target.x + "," + d.target.y;
                            }

                            function transform(d) {
                                return "translate(" + d.x + "," + d.y + ")";
                            }


                            function dragstart(d) {
                                d.fixed = true;
                                d3.select(this).classed("fixed", true);
                            }
                        });
                    }   

                </script>

这是我想在我的 api 中添加哪些功能的链接

http://bl.ocks.org/d3noob/5141528

有人请帮忙...

最佳答案

您需要将 click 事件处理程序附加到您的圈子才能执行此操作:

circle.on("click", function() {
  d3.select(this).attr("r", 12);
});

显然，您可以调整新半径或从绑定(bind)到圆的数据中获取它。

关于javascript - 如何更改 D3 节点 onclick 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21078681/