我刚刚进入javascript和d3.js.请原谅这个简单的问题,但我厌倦了看这个无济于事。我确信这显然很简单,但为什么这些条形图从上到下而不是从下到上。我试图翻转域和范围中的值并尝试转换组但似乎没有任何效果。感谢。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://d3js.org/d3.v2.js"></script>
<style type="text/css">
.background
{
background-color:Gray;
border:solid 1px black
}
#container
{
margin:auto;
width:700;
}
body
{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var data = {};
data.distance = [3.17, 2.6, 3.08, 3.12, 3.14, 3.16, 3.19, 3.24, 3.21, 4.51, 3.18, 3.16, 3, 3.2, 3.07, 3.16, 3, 0.01, 2, 3.32, 3.33, 3, 3, 5, 3.41, 3.05, 3.01, 5, 5.03, 5, 1.68, 3, 3, 1.93, 1.96, 6.08, 4.27, 4.86, 3, 3, 2.51, 3.97, 2.87, 4, 4, 7.94, 6.64, 4, 4.03, 0.25, 2.64, 8.09, 1.96, 4.64, 5.48, 5.54, 7, 4, 4]
var y = d3.scale.linear()
.domain([0,d3.max(data.distance)])
.range([0,250]);
var chart = d3.select("div")
.append("svg")
.attr("class","background")
.attr("width",10*data.distance.length)
.attr("height",350)
.append("g")
chart.selectAll("rect")
.data(data.distance)
.enter()
.append("rect")
.attr("fill", "white")
.attr("stroke","black")
.attr("width", 10)
.attr("height",y)
.attr("x",function(d,i){return i *10});
</script>
</body>
答案 0 :(得分:1)
如果同时添加y
和height
,则可以计算从底部开始的条形码:
.attr("height", 350)
.attr("y", function(d) { return 350-d; })