第一次测试成功的d3.js代码，需要在ie9及以上的浏览器打开。火狐和google也可以尝试。删除<textarea>部分标记。
<textarea cols="20" rows="8" id="con">
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<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>
</html>
</textarea>
<input value="运行代码" type="button" id="btn" />