javascript - D3 bar graph X-ticks not aligning -


i making bar graph using d3 when plot bar graph x-ticks not aligning under bars. think i'm not transforming bars properly. used following example http://bost.ocks.org/mike/bar/ , have been able create bar graph. appreciated. thank in advance.

<!doctype html> <meta charset="utf-8"> <style>  .bar {   fill: steelblue; }  .bar:hover {   fill: brown; }  .axis {   font: 10px sans-serif; }  .axis path, .axis line {   fill: none;   stroke: #000;   shape-rendering: crispedges; }  .x.axis path {   display: none; }  </style> <body>     <script src="http://d3js.org/d3.v3.min.js"></script>  <script>         var data = [277, 407, 422, 279, 680, 485, 1624, 729, 327, 425, 205, 236];         var margin = {top: 30, right: 30, bottom: 30, left: 30},             width = 480 - margin.left - margin.right,             height = 340 - margin.top - margin.bottom;          var labels = [  {"key": "ws1"},{"key": "ws2"},{"key": "ws3"},{"key": "ws4"},                 {"key": "ws5"},{"key": "ws6"},{"key": "ws7"},{"key": "ws8"},                 {"key": "ws9"},{"key": "ws10"},{"key": "ws11"},{"key": "ws12"},                 {"key": "ws13"}];          var colo = ['rgb(179,205,227)','rgb(140,150,198)','rgb(136,86,167)','rgb(129,15,124)',         'rgb(254,217,142)','rgb(254,153,41)','rgb(217,95,14)','rgb(153,52,4)',         'rgb(251,180,185)','rgb(247,104,161)','rgb(197,27,138)','rgb(122,1,119)']          var y = d3.scale.linear()             .domain([0, d3.max(data)])             .range([height, 0]);          var x = d3.scale.ordinal()           .domain(labels.map(function(d) { return d.key}))             .rangeroundbands([0, width]);          var xaxis = d3.svg.axis()             .scale(x)             .orient("bottom");          var chart = d3.select("body").append("svg")             .attr("width", width + margin.left + margin.right)             .attr("height", height + margin.top + margin.bottom)             .append("g");          var barwidth = width / data.length;         console.log(width);         console.log(height);         console.log(data.length);          var bar = chart.selectall("g")             .data(data)             .enter().append("g");            var ii = 0;           bar.append("rect")             .attr("fill", function(d) { ii += 1; return colo[ii-1]; })                     .attr("y", function(d) { return y(d); })                     .attr("x", function(d,i) { return x(d.key)})                     .attr("width", barwidth - 1)                     .attr("height", function(d) { return height - y(d); })             .attr("transform", function(d, i) {                         return "translate(" + ((i) * (barwidth)) + ", 0)";                        });          chart.append("g")           .attr("class", "x axis")             .attr("transform", "translate(0," + (height) + ")")             .call(xaxis); </script> 

your labels array has 13 items data array has 12. make lengths equal , ticks line up.


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -