Question

我有一个应用程序，我用D3.js填充树状结构。此树中的每个节点代表一个名称。当我点击节点时，我能够在java脚本警报中捕获节点名称。但我的要求是我应该发送名称，这是一个警报给Servlet。这是我的代码

.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}

.node {
    font: 10px sans-serif;
}

.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
    }

</style>
<body>
<script type="text/javascript" src="d3/d3.v3.min.js"></script>
<script>

    var width = 300;
    height = 500;

    var cluster = d3.layout.cluster()
    .size([height, width - 160]);

    var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(40,0)");

    d3.json("ActionServlet", function(error, root) {
        var nodes = cluster.nodes(root),
        links = cluster.links(nodes);            


        var link = svg.selectAll(".link")
        .data(links)
        .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal);

        var node = svg.selectAll(".node")
        .data(nodes)
        .enter().append("g")
        .attr("class", "node")
        .on("click", click)
        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

        node.append("circle")
        .attr("r", 4.5);

        node.append("text")
        .attr("dx", function(d) { return d.children ? -8 : 8; })
        .attr("dy", 3)
        .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
        .text(function(d) { return d.name; });

        function click(d){
            alert("This Number is: "+d.name);
        }

    });

    d3.select(self.frameElement).style("height", height + "px");

</script>

我希望ActionServlet中的值用于创建json.somebody请帮助。 This is the structure i am using and this is the alert in which i am showing the value

Answer 1

请使用此更改您的点击功能 -

 function click(d){               
           var name=d.name;               
               $.ajax({
                   url: "ActionServlet",
                   type: "post",
                   data: { "root":name },
                   error:function(){
                       alert("error occured!!!");
                   },
                   success:function(d){
                       //alert(d.name);
                   }
               });

       }

   });

如何将值从D3节点发送到Servlet

1 个答案: