Question

我有一个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

有人请帮忙......

Answer 1

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

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

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

Answer 2

对于那些仍然想知道如何在单击新节点后使上一个节点恢复到其常规大小的人，这是一个简单的解决方案：

import requests

urlpage = "https://en.wikipedia.org/wiki/Albert_Einstein#Publications"
my_string = """<h1 id="firstHeading" class="firstHeading" lang="en">Albert Einstein</h1>""" # define the string you want

response = requests.get(urlpage).text # get the full response html as str
cut_response = response[response.find(my_string)::] # cut the str from your string on

soup1 = (bs4.BeautifulSoup(cut_response, 'lxml')).get_text() # get soup object, but of cut string
print(soup1)

只需将前一个元素存储到变量var toRemove; .on('click', function() { if(toRemove){ d3.select(toRemove).attr("r", 6); } toRemove = this; d3.select(this).attr("r", 12); });中，然后单击新的圆，将前一个元素的半径设置回其原始大小。

如何在onclick上更改D3节点的大小

2 个答案: