[英]D3 Horizontal bar graph's bars not all appearing
I have created a bar graph in d3 我在d3中创建了一个条形图
$(document).ready(function(){
var data = [0,20,10,60,100,75,40,20,25,2];
var width = 300;
var height = 300;
var padding = 1;
var userPerformanceChart = d3.select("#userPerformanceChart").append("svg").attr("width",width).attr("height",height);
userPerformanceChart.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x",40)
.attr("y",function(d,i){
console.log("function being called");
return i*(width/data.length);
})
.attr("width",function(d){
return d;
})
.attr("height",width/data.length - padding)
.attr("fill",function(d){
return "rgb(0," + (d*2) + ",0)";
});
This is my html - 这是我的HTML -
<div class="clear"></div>
<div class="horizontalMenu clear" id="quizSummaryMenu">
<a href="#" class="quizSummaryLink" id="quizLink">Quiz</a>
<a href="#" class="quizSummaryLink" id="historyLink">Statistis</a>
<a href="#" class="quizSummaryLink" id="topScorersLink">Top Scorers</a>
<a href="#" class="quizSummaryLink" id="practiceModeLink">Practice Mode</a>
<a href="#" class="quizSummaryLink" id="editQuizLink">Edit Quiz</a>
</div>
<div class="subContainer" id="quizDisplayContainer">
<div id="userPerformanceChart"></div>
</div>
The top rectangle does not appear, it seems to be appearing behind the menu, and I'm not sure why. 顶部的矩形没有出现,它似乎出现在菜单后面,我不知道为什么。 Can anyone help?
有人可以帮忙吗?
实际上顶栏存在...第一个柱的宽度计算为零,因为数据数组的第一个索引是0 ...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.