CODEWITHSUNDEEP
javascriptd3.js
praks5432
praks5432

Reputation: 7792

D3 Horizontal bar graph's bars not all appearing

I have created a bar graph in 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 -

<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?

Upvotes: 0

Views: 308

Answers (1)

selvagsz
selvagsz

Reputation: 3872

Actually the top bar exists... The width of the first bar is calculated to zero since the first index of data array is 0...

Upvotes: 2

Related Questions