Question

Here is the picture i want to select multiple nodes at a time and send them to servlet 我在D3.js中有一个应用程序，我有一个类似于network.ie的网络节点正在形成另一组节点，依此类推，所以我能够将每个节点的值发送到Servlet。但现在我必须选择一组节点，它们的值将被发送到Servlet，即用户可能希望一次选择多个节点。但我无法做到这一点。这是我的代码......

  <!DOCTYPE html>
<meta charset="utf-8">
<style>

.node circle {
    cursor: pointer;
    stroke: #3182bd;
    stroke-width: 1.5px;
}

.node text {
    font: 10px sans-serif;
    pointer-events: none;
    text-anchor: middle;
}

line.link {
    fill: none;
    stroke: #9ecae1;
    stroke-width: 1.5px;
    }

</style>
<body>

<script type="text/javascript" src="d3/d3.v3.min.js"></script>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

    var width = 1200,
    height = 700,
    root;

    var force = d3.layout.force()
    .linkDistance(80)
    .charge(-120)
    .gravity(.04)
    .size([width, height])
    .on("tick", tick);

    //adding as svg element
    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

    var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");

    d3.json("JsonServlet", function(error, json) {
        root = json;
        update(); //responsible for creating the layout
    });

    function update() {
        var nodes = flatten(root),

        /*
         *d3.layout.tree() is the starting point 
         *for tree layouts in D3. 
         *The call to this function returns an object
         * that contains a bunch of methods to configure 
         * the layout and also provides methods to 
         * compute the layout
         **/           

        links = d3.layout.tree().links(nodes);//attach the nodes

        // Restart the force layout.
        force
        .nodes(nodes)
        .links(links)
        .start();

        // Update links.
        link = link.data(links, function(d) { return d.target.id; });

        link.exit().remove();

        link.enter().insert("line", ".node")
        .attr("class", "link");

        // Update nodes.
        node = node.data(nodes, function(d) { return d.id; });

        node.exit().remove();

        var nodeEnter = node.enter().append("g")
        .attr("class", "node")
        .on("click", click)
        .call(force.drag);

        nodeEnter.append("circle")
        .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; });

        nodeEnter.append("text")
        .attr("dy", ".35em")
        .text(function(d) { return d.name; });

        node.select("circle")
        .style("fill", color);
    }


    /*Giving elements on click*/
    function tick() {
        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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    }


    /*Adjusting the color of each node*/

function color(d) {
        return d._children ? "#3182bd" // collapsed package
        : d.children ? "#c6dbef" // expanded package
        : "#fd8d3c"; // leaf node
    }
var checkNodes = [];
    // Toggle children on click.
    function click(d) {


       checkNodes.push(d);
        update();
    }

    function send(){
    //alert("This Number is: "+d.name);
    var name=d.name;

        $.ajax({
            url: "ActionServlet",
            type: "post",
            data: [extract each node names from "checkNodes"],
            error:function(){
                //alert("error occured!!!");
            },
            success:function(d){
                //alert(d.name);
            }
        });
    checkNodes = [];//clear 
}

    // Returns a list of all nodes under the root.
    function flatten(root) {
        var nodes = [], i = 0;

        function recurse(node) {
            if (node.children) node.children.forEach(recurse);
            if (!node.id) node.id = ++i;
            nodes.push(node);
        }

        recurse(root);
        return nodes;
    }

</script>

Answer 1

如此修改如何：

var checkNodes = [];

function click(d){
    checkNodes.push(d);
}

function collectNames(){
                var res = []
                checkNodes.forEach(function(v){
                    res.push(v.name);
                })
                return res;
            }

function send(){
        //alert("This Number is: "+d.name);
        var name=d.name;

            $.ajax({
                url: "ActionServlet",
                type: "post",
                //data: [extract each node names from "checkNodes"],
                data:collectNames(),//send name array to server 
                error:function(){
                    //alert("error occured!!!");
                },
                success:function(d){
                    //alert(d.name);
                }
            });
        checkNodes = [];//clear 
    }

当然你应该决定调用“send（）”的时间，可能是由用户操作驱动的。

如何在D3.js中选择多个节点并将它们发送到Servlet

1 个答案: