javascript - Stop bars from centering in chart -


i creating bar chart using d3. looked @ this code , changed little bit.

however centering bars, , bars start immediate @ bar y axis.

it looks issue comes these 2 pieces of code:

var x = d3.scale.ordinal()     .rangeroundbands([0, width], .0); 

and last line of one:

svg.selectall(".bar")     .data(graphobj)     .enter().append("rect")     .attr("class", "bar")     .attr("x", function(d) { return x(d.step); }) 

where x(d.step) responsible distance, x set @ var x = ...

somehow need change this, cant figure out. distance bit different since changed this:

var x = d3.scale.ordinal()     .rangeroundbands([0, width], .1); 

to this:

var x = d3.scale.ordinal()     .rangeroundbands([0, width], .0); 

but doesn't much.

can out here?

this code:

        $('#chartdiv').html('');          var margin = {top: 10, right: 10, bottom: 35, left: 50},             width = 600 - margin.left - margin.right,             height = 250 - margin.top - margin.bottom;          var x = d3.scale.ordinal()             .rangeroundbands([0, width], .0);          var y = d3.scale.linear()             .range([height, 0]);          var xaxis = d3.svg.axis()             .scale(x)             .orient("bottom");           var yaxis = d3.svg.axis()             .scale(y)             .orient("left")             .ticks(10, "");          var svg = d3.select("#chartdiv").append("svg")             .attr("width", width + margin.left + margin.right)             .attr("height", height + margin.top + margin.bottom)             .append("g")             .attr("transform", "translate(" + margin.left + "," + margin.top + ")");           graphobj.foreach(function(d) {             d.step = +d.step;             d.temp = +d.temp;         });          x.domain(graphobj.map(function(d) { return d.step; }));         y.domain([0, d3.max(graphobj, function(d) { return d.temp; })]);          svg.append("g")             .attr("class", "x axis")             .attr("transform", "translate(0," + height + ")")             .call(xaxis);          svg.append("g")             .attr("class", "y axis")             .call(yaxis)             .append("text")             .attr("transform", "rotate(-90)")             .attr("y", 6)             .attr("dy", "-40px")             .style("text-anchor", "end")             .text("temperature");          svg.selectall(".bar")             .data(graphobj)             .enter().append("rect")             .attr("class", "bar")             .attr("x", function(d) { console.log(d.step, x.rangeband(), x(d.step)); return x(d.step); })             .attr("width", x.rangeband())             .attr("y", function(d) { return y(d.temp); })             .attr("height", function(d) { return height - y(d.temp); });          if ($('#chartdiv').css('left').replace('px','') < 0) {             $('#chartdiv').animate({                 left: 10             }, 1000);         } 

you need add i variable .attr("x", function(d) { return x(d.step); }), so: .attr("x", function(d, i) { return x.rangeroundbands() * i; }), go through bars , place them 1 after other (this might need tweaking, can't without jsfiddle) should @ least on path of fixing without issues


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -