Home > Developer > Web Develop
D3js-add, delete, and sort bar charts, and sort d3js-bar charts
<% @ 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">
<Html>
<Head>
<Base href = "<% = basePath %>">
<Title> D3 added the deletion sorting 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">
-->
</Head>
<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">
// Define 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 border
Var padding = {top: 20, right: 20, bottom: 20, left: 20 };
// The width of the rectangle is blank.
Var rectStep = 35;
// The width of the rectangle is not blank.
Var rectWidth = 30;
// Draw a rectangle
Function draw ()
{
// 1 -----------------------------------
// Obtain the updata part of the rectangle
Var updateRect = svg. selectAll ("rect ")
. Data (dataset );
// Obtain the enter part of the rectangle
Var enterRect = updateRect. enter ();
// Obtain the exit part of the rectangle
Var exitRect = updateRect. exit ();
// Obtain the processing of the rectangular 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;
})
// The height and width of the rectangle
. Attr ("width", rectWidth)
. Attr ("height", function (d, I)
{
Return d;
});
// Obtain the processing of the rectangular 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;
})
// The height and width of the rectangle
. Attr ("width", rectWidth)
. Attr ("height", function (d, I)
{
Return d;
});
// Obtain the processing of the rectangular exit Method
ExitRect. remove ();
// 2 --------------------------------------
// Obtain text update Processing
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 ();
}
// Call the plotting function
Draw ();
// Sort
Function sortData ()
{
Dataset. sort (d3.ascending );
Draw ();
}
// Add
Function addData ()
{
Dataset. push (Math. floor (Math. random () * 100 ));
Draw ();
}
// Delete
Function deleteData ()
{
// Select all entries
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>
</Html>
Reference Site: http://www.ourd3js.com/wordpress? P = 841
Http://blog.csdn.net/tianxuzhang/article/details/14086627
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
