如何在D3.js中選擇多個節點並將其發送到Servlet

Question

這是我想一次選擇多個節點並將其發送到servlet的圖片我在D3.js中有一個應用，其中我有一個類似網絡的結構。即一個節點正在形成另一組節點，依此類推，因此我能夠將每個節點的值發送到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 個解決方案

解決方案1
0 2013-11-19 05:59:39

如何在D3.js中選擇多個節點並將其發送到Servlet

問題描述

1 個解決方案

解決方案1 0 2013-11-19 05:59:39

解決方案1
0 2013-11-19 05:59:39