d3.js - d3js column bar chart height error -


i'm trying replicate this simple column bar chart in d3 except use negative values. able figure out how use negative values, axis seems off. think it's i'm doing y-values.

here's i'm drawing bars:

var chart = d3.select("body").append("svg")         .attr("class","chart")         .attr("width", w * data.length - 1)         .append("g")         .attr("height", h);   chart.selectall("rect")      .data(data)      .attr("class","rect")      .enter().append("rect")      .attr("x", function(d, i) { return x(i) - .5; })      .attr("y", function(d) { return h - y(d.value) - .5; })      .attr("width", w)      .attr("height", function(d) { return math.abs(y(d.value) - y(0)); });  

and here's fiddle everything: http://jsfiddle.net/y4wac/2/

i want have x-axis @ 0 , bars originating x-axis simple i'm n00b

thanks!

to this, need move line adjusting y coordinate. in case, easiest done subtracting y(0) height, i.e.

.attr("y1", h - y(0)) .attr("y2", h - y(0)) 

updated jsfiddle here.


Comments

Popular posts from this blog

html - How to style widget with post count different than without post count -

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

javascript - storing input from prompt in array and displaying the array -