javascript – 如何更改D3节点的大小

前端之家收集整理的这篇文章主要介绍了javascript – 如何更改D3节点的大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个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

有人请帮助…

解决方法

您需要将点击事件处理程序附加到您的圈子才能执行此操作:
circle.on("click",function() {
  d3.select(this).attr("r",12);
});

您可以明显地调整新的半径或从绑定到圆圈的数据中获取.

原文链接:https://www.f2er.com/js/152443.html

猜你在找的JavaScript相关文章