<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%>
<%
String path = Request.getcontextpath ();
String basepath = request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";
%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<base href= "<%=basePath%>" >
<title>d3 Add Delete Sort bar chart </title>
<meta http-equiv= "Pragma" content= "No-cache" >
<meta http-equiv= "Cache-control" content= "No-cache" >
<meta http-equiv= "Expires" content= "0" >
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This is my page" >
<!--
<link rel= "stylesheet" type= "Text/css" href= "Styles.css" >
-
<body>
<script type= "Text/javascript" src= "Js/d3/d3.js" ></script>
<script type= "Text/javascript" src= "Js/d3/d3.min.js" ></script>
<script type= "Text/javascript" >
Defining variables
var width = 1000;
var height=600;
var dataset=[];
var svg = d3.select ("Body"). Append ("SVG")
. attr ("width". width)
. attr ("height", height);
for (Var i=0;i<5;i++)
{
Dataset[i]=math.floor (Math.random () *100);
}
Console.log (DataSet);
Outer frame
var padding={top:20,right:20,bottom:20,left:20};
Rectangle width includes blank
var rectstep=35;
Rectangle width does not include white space
var rectwidth=30;
Draw a rectangle
function Draw ()
{
1-----------------------------------
Get the Rectangle updata section
var updaterect = Svg.selectall ("rect")
. data (DataSet);
Get the Enter portion of a rectangle
var enterrect =updaterect.enter ();
Get the exit portion of a rectangle
var exitrect =updaterect.exit ();
Getting the processing of the rectangle Update method
Updaterect.attr ("Fill", "Steelblue")
Rectangular coordinates
. attr ("X", Function (D,i)
{
return padding.left+i*rectstep;
})
. attr ("Y", function (D,i)
{
return height-padding.bottom-d;
})
High width of the rectangle
. attr ("width", rectwidth)
. attr ("Height", function (D,i)
{
return D;
});
Get the handle of the rectangle enter method
Enterrect.append ("rect")
. attr ("Fill", "Steelblue")
Rectangular coordinates
. attr ("X", Function (D,i)
{
return padding.left+i*rectstep;
})
. attr ("Y", function (D,i)
{
return height-padding.bottom-d;
})
High width of the rectangle
. attr ("width", rectwidth)
. attr ("Height", function (D,i)
{
return D;
});
Get the handle of the rectangle exit method
Exitrect.remove ();
2--------------------------------------
Get the processing of text update
var updatetext = Svg.selectall ("text")
. data (DataSet);
var entertext = Updatetext.enter ();
var exittext = Updatetext.exit ();
Updatetext.attr ("Fill", "white")
. attr ("Font-size", "14px")
. attr ("Text-anchor", "Middle")
. attr ("X", Function (D,i)
{
return padding.left+i*rectstep;
})
. attr ("Y", function (D,i)
{
return height-padding.bottom-d;
})
. attr ("DX", RECTWIDTH/2)
. attr ("dy", "1em")
. text (function (d,i)
{
return D;
});
Entertext.append ("text")
. attr ("Fill", "white")
. attr ("Font-size", "14px")
. attr ("Text-anchor", "Middle")
. attr ("X", Function (D,i)
{
return padding.left+i*rectstep;
})
. attr ("Y", function (D,i)
{
return height-padding.bottom-d;
})
. attr ("DX", RECTWIDTH/2)
. attr ("dy", "1em")
. text (function (d,i)
{
return D;
});
Exittext.remove ();
}
Calling drawing functions
Draw ();
Sort
function SortData ()
{
Dataset.sort (d3.ascending);
Draw ();
}
Increase
function AddData ()
{
Dataset.push (Math.floor (Math.random () *100));
Draw ();
}
Delete
function DeleteData ()
{
Select all bars
Dataset.shift ();
var bars = svg.selectall ("rect")
. data (DataSet);
Bars.exit ()
. remove ();
Draw ();
}
</script>
<br/>
<div>
<button type= "button" onclick= "SortData ()" > Sort </button>
<button type= "button" onclick= "AddData ()" > Add </button>
<button type= "button" onclick= "DeleteData ()" > Delete </button>
</div>
</body>
Reference website: http://www.ourd3js.com/wordpress/?p=841
http://blog.csdn.net/tianxuzhang/article/details/14086627
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
d3js-to histogram, delete, sort
