The first test of the successful D3.js code needs to be opened in the IE9 and above browsers. Firefox and Google can also try. Delete <textarea> section tags.
<textarea cols=
"20"
rows=
"8"
id=
"con"
>
<! DOCTYPE html>
<title></title>
<style type= "Text/css" >
body{
height:100%;
}
. Chart Rect {
Stroke:white;
Fill:steelblue;
}
</style>
<script src= "Http://d3js.org/d3.v3.min.js" >
</script>
<body>
</body>
<script type= "Text/javascript" >
var data = [4, 8, 15, 16, 23, 42];
var chart = d3.select ("Body"). Append ("SVG")
. attr ("Class", "chart")
. attr ("width", 1000)
. attr ("height", 500)
. Append ("G")
. attr ("transform", "Translate (10,15)");
var x = D3.scale.linear ()
. domain ([0, D3.max (data)])
. Range ([0, 820]);
var y = d3.scale.ordinal ()
. Domain (data)
. Rangebands ([0, 120]);
Chart.selectall ("rect")
. Data (data)
. Enter (). Append ("rect")
. attr ("y", y)
. attr ("width", x)
. attr ("Height", Y.rangeband ());
Chart.selectall ("text")
. Data (data)
. Enter (). Append ("text")
. attr ("x", X)
. attr ("Y", function (d) {return Y (d) + Y.rangeband ()/2;})
. attr ("DX",-3)//Padding-right
. attr ("dy", ". 35em")//Vertical-align:middle
. attr ("Text-anchor", "End")//Text-align:right
. text (String);
Chart.selectall ("line")
. Data (X.ticks (10))
. Enter (). Append ("line")
. attr ("x1", X)
. attr ("X2", X)
. attr ("Y1", 0)
. attr ("y2", 120)
. Style ("Stroke", "#ccc");
Chart.selectall ("a")
. Data (X.ticks (10))
. Enter (). Append ("text")
. attr ("class", "rule")
. attr ("x", X)
. attr ("Y", 0)
. attr ("Dy",-3)
. attr ("Text-anchor", "Middle")
. text (String);
</script>
</textarea>
<input value=
"运行代码"
type=
"button"
id=
"btn"
/>
Test the successful D3.js code