我在JSP文件中的d3js中创建了一个树形图布局。我正在连接到数据库并将数据呈现到JSON文件中，然后显示数据。现在我有两个文本框，我输入我的＆＃39;来自＆＃39;和＆＃39;到＆＃39;日期并单击提交。再次发生与数据库的连接，并使用新数据重新加载相同的JSON文件。但是这里没有刷新树形图。我无法在这里弄清楚这个问题。请帮忙。代码如下。
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Sat, 01 Dec 2001 00:00:00 GMT">
<script type="text/javaScript" src="d3/d3.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override height later */
margin-right: 2px;
background-color: brown;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
<!-- margin: 50px 50px; -->
margin: auto;
position: relative;
width: 1000px;
height:550px;
}
form {
position: absolute;
left: 20px;
bottom: 10px;
}
.node {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
.lables {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 5px;
}
</style>
<% response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>
</head>
<body>
<H4> A POC On D3.js with TreeMap Layout </H4>
<form class="lables" action="Treemap_fetch.jsp">
<label><input type="radio" name="mode" value="size" checked> Clicks</label>
<label><input type="radio" name="mode" value="ctr"> Ctr</label>
<label><input type="radio" name="mode" value="searches"> Searches</label>
<br> <br>
<label>From</label>
<input type="text" id="from" name="from">
<label>to</label>
<input type="text" id="to" name="to">
<input type="submit" value="Submit"> <!-- onClick=fetch() -->
<div id="myDiv"></div>
</form>
<div id="tooltip" class="hidden">
<!-- <p><strong>Label</strong></p> -->
<p><span id="value"></span></p>
</div>
<%@page import="com.aol.poc.d3js.dbConnect.NetezzaJdbcConnection,com.aol.poc.d3js.properties.*" %>
<%@page import="com.aol.poc.d3js.treemap.CsvToJson_V2,java.text.SimpleDateFormat,java.util.Date"%>
<%
//String mode = request.getParameter("mode");
String from="",to="";
from = request.getParameter("from");
to = request.getParameter("to");
NetezzaJdbcConnection njc = new NetezzaJdbcConnection();
CsvToJson_V2 readCsv = new CsvToJson_V2();
if(from == null || to == null){
System.out.println("Inside if null");
njc.extractData();
}
else{
System.out.println("Inside else");
njc.extractData(from,to);
}
readCsv.readCsv();
%>
<script>
//var margin = {top: 40, right: 10, bottom: 10, left: 10},
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 1200 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
//var width = 500; var height = 500;
var color = d3.scale.category20();
var treemap = d3.layout.treemap()
.size([width, height])
.sticky(true)
.value(function(d) { return d.clicks; });
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right )
.attr("height", height + margin.top + margin.bottom)
.append("g");
d3.json("data/OuputJSON.json", function(error,root){
//alert("Inside json");
var rects = svg.datum(root)
.selectAll("rect")
.data(treemap.nodes)
.enter()
.append("rect")
.call(position);
var texts = svg.selectAll("text")
.data(treemap.nodes)
.enter()
.append("text")
.call(textPrint);
//Tooltip and highlighting starts
d3.selectAll("rect").on("mouseover",mouseover);
d3.selectAll("rect").on("mouseout",mouseout);
//Tooltip and Highlighting ends
//Transition of the Treemap.
d3.selectAll("input").on("change",change);
function change(){
var value = this.value;
if (this.value === "ctr") { value = function(d) {return d.ctr;}}
else if (this.value === "searches") { value = function(d) {return d.searches;}}
else { value = function(d) {return d.clicks;}}
//alert(value);
rects
.data(treemap.value(value).nodes)
.transition()
.duration(1500)
.call(position);
texts
.data(treemap.value(value).nodes)
.transition()
.delay(1500)
.duration(500)
.call(textPrint);
}//change
}); //d3.json
function position(){
this.attr("x", function(d) {return d.x;})
.attr("y", function(d) {return d.y;})
.attr("width", function(d) {return d.dx;})
.attr("height", function(d) {return d.dy;})
.attr("stroke","white")
.attr("fill", function(d) { //color(d.sub_group); });//return "teal" });
if(d.children == null)
return color(d.parent.sub_group); // color(d.parent.name);
else
return null;
});
}
function textPrint(){
this.attr("x",function(d) {return d.x + 3;})
.attr("y",function(d) {return d.y + 10;})
.attr("class","node")
.text(function(d){
if(d.dx <= 10 || d.dy <= 10){ return ""; } //If the rect is too small do not display the text
else if (d.children == null){
var pxK = 6.6,txtLngth = (d.clientid).length,txtAccomadate = Math.round(d.dx/pxK);
if (txtAccomadate >= txtLngth)
return d.clientid;
else
return "";
// return (d.clientid).substr(0,txtAccomadate);
}
else
return null;
});
}
function mouseover(d){
// The below code is used for highlighting the element (i.e. rect) on mouse hover
d3.select(this)
.attr("fill", "orange");
//Get this rects x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + (d.dx)/2;
var yPosition = parseFloat(d3.select(this).attr("y")) + (d.dy)/2;
//Update the tooltip position and value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(d.parent.sub_group+"--"+d.clientid);
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
}
function mouseout(d) {
d3.select(this)
.transition()
.duration(500)
.attr("fill", function(d) {
if(d.children == null)
return color(d.parent.sub_group);
else
return null;
})
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
}
</script>
</body>
</html>