d3.js Bar chart supporting negative values
d3.js
Solution
First you have to change the y domain to accept negative values:
y.domain([d3.min(data,function(d){return d.count}), d3.max(data, function(d) { return d.count; })]);
Then you have to play with the `y` and `height` attributes of `bars` to make sure that the boxes are located at the correct place:
.attr("y", function(d) { return y(Math.max(0, d.count)); })
.attr("height", function(d) { return Math.abs(y(d.count) - y(0)); })
Here is a working example (used in another answer): http://jsfiddle.net/chrisJamesC/tNdJj/4/
Problem
I am using d3.js and angular js directive for creating bar graph in our application. The code I have used is given below . This works for positive values.But it is not displayed for negative values.What chages I have to apply for supporting negative values. Html page for graph ``` <cr-d3-bars data='myData'></cr-d3-bars> ``` Js file for graph ``` mainApp.directive('crD3Bars', function() { return { restrict: 'E', scope: { data: '=' }, link: function (scope, element) { var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 480 - margin.left - margin.right, height = 360 - margin.top - margin.bottom; var svg = d3.select(element[0]) .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 + ")"); var x = d3.scale.ordinal().rangeRoundBands([0, width], .1); 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); //Render graph based on 'data' scope.render = function(data) { //Set our scale's domains x.domain(data.map(function(d) { return d.name; })); y.domain([0, d3.max(data, function(d) { return d.count; })]); //Redraw the axes svg.selectAll('g.axis').remove(); //X axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); //Y axis svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Count"); var bars = svg.selectAll(".bar").data(data); bars.enter() .append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.name); }) .attr("width", x.rangeBand()); //Animate bars bars .transition() .duration(1000) .attr('height', function(d) { return height - y(d.count); }) .attr("y", function(d) { return y(d.count); }); }; ``` I am supplying data as shown below ``` $scope.myData = [ {name: 'AngularJS', count: 300}, {name: 'D3.JS', count: 150}, {name: 'jQuery', count:10000}, {name: 'Backbone.js', count: 300}, {name: 'Ember.js', count: 100}, {name: 'hi.js', count: 300}, {name: 'hl.js', count: -100} ]; ``` Any one have solution please share with me