个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 15:24:12 25 4
gpt4 key购买 nike

Here is the picture i want to select multiple nodes at a time and send them to 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>

最佳答案

像这样修改怎么样:

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()”的时机，
可能是由用户操作驱动的。

关于java - 如何在D3.js中选择多个节点并将它们发送到Servlet，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20048696/

25 4 0
文章推荐： java - 仅使用测试库创建测试目录
文章推荐： c++ - win32 消息循环 - 我应该中断还是返回？
文章推荐： javascript - Iframe 上传者权限
文章推荐： c++ 指向字符串数组的指针
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com