Question

我正在尝试从jsp页面调用html文件。 HTML文件包含显示图表的d3.js代码。我在IFRAME标记中调用此HTML文件，但它不会填充。有人可以请我这个吗？

这是我的JSP文件：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
   pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
   <meta charset="utf-8">
   <script src="http://d3js.org/d3.v3.min.js"></script>
   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <title>
      Cluster Dendrogram
   </title>
   <link rel="icon" href="/favicon.png">
   <style>
      @import url("/style.css?20120730");
      header,
      footer {
      color: #555;
      }
      a.gist {
      color: #000;
      }
      .node circle {
      fill: #fff;
      stroke: steelblue;
      stroke-width: 3px;
      }
      .node text {
      font: 12px sans-serif;
      }
      .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
      }
   </style>
   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <header>
      <a class="gist" title="View gist #4063570 on GitHub" href="https://gist.github.com/mbostock/4063570">
      #4063570
      </a>
      <span class="date">
      November 13, 2012
      </span>
   </header>
   <body>
      <iframe src="/MVPApplication/WebContent/WEB_INF/test2.html" marginwidth="0" marginheight="0" width="600" height="700" scrolling="no">
      </iframe>
      <footer>
         <span class="date">
         November 13, 2014
         </span>
      </footer>
   </body>
</html>


Here is the HTML file that I am trying to call(test2.HTML)



<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Collapsible Tree Example</title>
      <style>
         .node circle {
         fill: #fff;
         stroke: steelblue;
         stroke-width: 3px;
         }
         .node text { font: 12px sans-serif; }
         .link {
         fill: none;
         stroke: #ccc;
         stroke-width: 2px;
         }
      </style>
   </head>
   <div>
      <!-- load the d3.js library --> 
      <script src="http://d3js.org/d3.v3.min.js"></script>
      <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
      <script>
         // ************** Generate the tree diagram  *****************
         var margin = {top: 80, right: 200, bottom: 20, left: 260},
           width = 960 - margin.right - margin.left,
           height = 500 - margin.top - margin.bottom;

         var i = 0;

         var tree = d3.layout.tree()
           .size([height, width]);

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

         var svg = d3.select("div").append("svg")
           .attr("width", width + margin.right + margin.left)
           .attr("height", height + margin.top + margin.bottom)
           .append("g")
           .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

         // load the external data
         d3.csv("test.csv", function(error, data) {

         // *********** Convert flat data into a nice tree ***************
         // create a name: node map
         var dataMap = data.reduce(function(map, node) {
           map[node.name] = node;
           return map;
         }, {});

         // create the tree array
         var treeData = [];
         data.forEach(function(node) {
           // add to parent
           var parent = dataMap[node.parent];
           if (parent) {
             // create child array if it doesn't exist
             (parent.children || (parent.children = []))
               // add node to child array
               .push(node);
           } else {
             // parent is null or missing
             treeData.push(node);
           }
         });

           root = treeData[0];
           update(root);
         });



         function update(source) {

           // Compute the new tree layout.
           var nodes = tree.nodes(root).reverse(),
             links = tree.links(nodes);


           // Normalize for fixed-depth.
           nodes.forEach(function(d) { d.y = d.depth * 150; });

           // Declare the nodesâ€¦
           var node = svg.selectAll("g.node")
             .data(nodes, function(d) { return d.id || (d.id = ++i); });15  // Enter the nodes.
           var nodeEnter = node.enter().append("g")
             .attr("class", "node")
             .attr("transform", function(d) { 
               return "translate(" + d.y + "," + d.x + ")"; });

           nodeEnter.append("circle")
             .attr("r", 10)
             .style("fill", "#fff");

              /* nodeEnter.append("text")
            .attr("y", function(d) { 
             return d.children || d._children ? -18 : 18; })
            .attr("dy", ".35em")
            .attr("text-anchor", "middle")
            .text(function(d) { return d.name; })
            .style("fill-opacity", 1);*/

           nodeEnter.append("text")
             .attr("x", function(d) { 
               return d.children || d._children ? -13 : 13; })
             .attr("dy", ".35em")
             .attr("text-anchor", function(d) { 
               return d.children || d._children ? "end" : "start"; })
             .text(function(d) { return d.name; })
             .style("fill-opacity", 1);

           // Declare the linksâ€¦
           var link = svg.selectAll("path.link")
             .data(links, function(d) { return d.target.id; });

           // Enter the links.
           link.enter().insert("path", "g")
             .attr("class", "link")
             .style("stroke", function(d) { return d.target.level; })
             .attr("d", diagonal);



         }

      </script>
   </div>
</html>

Answer 1

这可能对您有所帮助

<iframe src="test2.HTML" scrolling="auto">
</iframe>

如何使用iframe从jsp页面调用html文件

1 个答案: