我正在尝试弹出使用D3 libray生成的SVG矩阵的结果。不幸的是，SVG矩阵始终在主窗口而不是弹出窗口中打印。这就是我做的事情
我的javascript文件demo.js
.controller('FilterImageController', function($scope, $q, Algorithms,
Graphs, Trails, RestTags, SimMatREST, $http, $modal, $log) {
.........
.........
.........
.........
$scope.testD3 = function () {
//console.log(svg);
var modalInstance = $modal.open({
templateUrl: 'd3modal.html',
controller: 'ModalInstanceD3Ctrl',
size: 'lg'
}
})
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
.controller('ModalInstanceD3Ctrl', [ '$scope', '$modalInstance',
function ($scope, $modalInstance, miserables) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
var miserables ={ "nodes": [{ "name": "flare", "group": 0 },{ "name": "analytics", group": 0 },{ "name": "cluster", "group": 0
},{ "name": "graph","group": 0 }], "links":[{ "source": 0,
"target": 1, "value": 1 }, { "source": 1, "target": 2, "value":
10 },{ "source": 1, "target": 3, "value": 6 }]}
var margin = {top: 120, right: 100, bottom: 10, left: 120},
width = 500,
height = 500;
var x = d3.scale.ordinal().rangeBands([0, width]),
z = d3.scale.linear().domain([0, 4]).clamp(true),
c = d3.scale.category10().domain(d3.range(10));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("margin-left", margin.left + "px")
.style("margin-top", margin.top + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var matrix = [],
nodes = miserables.nodes,
n = nodes.length;
// Compute index per node.
nodes.forEach(function(node, i) {
node.index = i;
node.count = 0;
matrix[i] = d3.range(n).map(function(j) { return {x: j, y: i, z: 0}; });
});
// Convert links to matrix; count character occurrences.
miserables.links.forEach(function(link) {
matrix[link.source][link.target].z += link.value;
matrix[link.target][link.source].z += link.value;
matrix[link.source][link.source].z += link.value;
matrix[link.target][link.target].z += link.value;
nodes[link.source].count += link.value;
nodes[link.target].count += link.value;
});
// Precompute the orders.
var orders = {
name: d3.range(n).sort(function(a, b) { return d3.ascending(nodes[a].name, nodes[b].name); }),
count: d3.range(n).sort(function(a, b) { return nodes[b].count - nodes[a].count; }),
group: d3.range(n).sort(function(a, b) { return nodes[b].group - nodes[a].group; })
};
// The default sort order.
x.domain(orders.name);
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height);
var row = svg.selectAll(".row")
.data(matrix)
.enter().append("g")
.attr("class", "row")
.attr("transform", function(d, i) { return "translate(0," + x(i) + ")"; })
.each(row);
row.append("line")
.attr("x2", width);
row.append("text")
.attr("x", -6)
.attr("y", x.rangeBand() / 5)
.attr("dy", ".32em")
.attr("text-anchor", "end")
.text(function(d, i) { return nodes[i].name; });
var column = svg.selectAll(".column")
.data(matrix)
.enter().append("g")
.attr("class", "column")
.attr("transform", function(d, i) { return "translate(" + x(i) + ")rotate(-90)"; });
column.append("line")
.attr("x1", -width);
column.append("text")
.attr("x", 6)
.attr("y", x.rangeBand() / 5)
.attr("dy", ".32em")
.attr("text-anchor", "start")
.text(function(d, i) { return nodes[i].name; });
function row(row) {
var cell = d3.select(this).selectAll(".cell")
.data(row.filter(function(d) { return d.z; }))
.enter().append("rect")
.attr("class", "cell")
.attr("x", function(d) { return x(d.x); })
.attr("width", x.rangeBand())
.attr("height", x.rangeBand())
.style("fill-opacity", function(d) { return z(d.z); })
.style("fill", function(d) { return nodes[d.x].group == nodes[d.y].group ? c(nodes[d.x].group) : null; })
.on("mouseover", mouseover)
.on("mouseout", mouseout);
console.log(cell);
}
function mouseover(p) {
d3.selectAll(".row text").classed("active", function(d, i) { return i == p.y; });
d3.selectAll(".column text").classed("active", function(d, i) { return i == p.x; });
}
function mouseout() {
d3.selectAll("text").classed("active", false);
}
}])
这是html文件demo.html
<div class="col-lg-1">
<button class="btn btn-primary" ng-click="testD3()">
Calculate
</button>
</div>
<script type="text/ng-template" id="d3modal.html">
<div class="modal-header">
</div>
<div class="modal-body">
<div> inside the modal</div>
<button class="btn btn-primary" ng-click="recal()">recal</button>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="cancel()">cancel</button>
<!--<button class="btn btn-warning" ng-click="cancel()">Cancel</button>-->
</div>
</script>
我在这里缺少什么。任何帮助都会得到真正的赞赏。谢谢
答案 0 :(得分：0)
我认为您可能需要使用
加载js文件import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.sql.*;
public class NewServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String name = request.getParameter ("name");
String age=request.getParameter("age");
out.println("your name is " +name+" <br>");
out.println("Your age is " +age+"<br> ");
try {
//loading drivers for mysql
Class.forName("com.mysql.jdbc.Driver");
//creating connection with the database
Connection con=DriverManager.getConnection
("jdbc:mysql://localhost:3306/mysql","username=root","password=root");
PreparedStatement ps=con.prepareStatement
("insert into raa values(?,?)");
ps.setString(1, name);
ps.setString(2,age );
int i=ps.executeUpdate();
out.println("ACCOUNT REVIEW<br>");
if(i>0)
{
out.println("You are sucessfully registered");
}
}
catch(Exception se)
{
se.printStackTrace();
}
}
}
而且，也不要在标签之间保留任何html标记代码。