score:9
Accepted answer
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/
Source: stackoverflow.com
Related Query
- d3.js Bar chart supporting negative values
- Bar chart with negative values
- d3.js stacked bar chart with positive and negative values
- d3.js v4 bar chart with negative values on y axis
- Transitioning a bar chart with negative values for the width
- Unable to handle negative values on d3 bar chart
- D3 bar chart not working properly with all negative and positive values
- D3 v4 bar chart X axis with negative values
- Negative values not showing in grouped bar chart
- Bar chart to take account of negative values
- D3 Bar Chart Negative Values not Showing Up
- d3,js setting X and Y domains on Horizontal Bar Chart with all negative values
- d3.js - group 2 data values in a stacked bar chart
- Special donut chart with different rings/arcs for positive and negative values
- Build D3js Area Chart with negative values
- Bar chart show values on top
- Trouble using DC.js (crossfilter and d3 convenience library) - bar chart not showing values
- D3 bar chart - how to display positive/negative values together?
- 2 arrays one of values one of colors make D3 bar chart have color at same index of value
- Preview d3 bar chart such that it sorted by values for each x value
- d3.js create stacked bar chart from values in object
- How to show values stacked bar chart utilizing dc.js and d3.js?
- Adding background color in d3 js bar chart using data values
- how to use d3 .ticks to show original y-axis values in bar chart
- Prevent negative values in NVD3 chart axis
- d3.js bar which starts with negative values
- d3.js stacked bar chart sort / change order of individual values within a stack
- D3 bar chart yaxis scaling issue, I don't want decimal/duplicate values
- How to display negative values in a d3 bar chart?
- d3 redraw bar chart with new values
More Query from same tag
- How to make hour and minutes as x axis in nvd3.js graph
- Draw a graph using D3 (v3) in a WebWorker
- Export SVG with external CSS to server
- d3 easing functions for accelerated/decelerated motion
- AngularJS why I'm getting this Error: $rootScope:infdig Infinite $digest Loop and How to Fix it
- How can I display my SVG layer on top of my Mapbox map?
- d3.geo: Path vs. Projection
- Aligning text to the left & Right of a circle depending on the data
- Error loading d3-geo-projection
- Making Cubism.js work with Rails app
- D3 force layout hover on arrow
- Path intersection causes parts of them to disappear [D3 Path Generation]
- javascript merge two functions to check the node type with another element
- Outputting SVG Graph from D3.js Using Phantomjs
- d3.js chart area filling with different colors
- (d3.js force directed graph) Cannot create property 'vx', but this happens in localhost only
- D3 zoomable timeline, how to get actual extreme values?
- dc.js bar chart with ordinal axes
- How to get automatically generated tickValues for d3 axis
- d3.js stacked bar chart sort / change order of individual values within a stack
- How to hide a content on stacked Bar Chart below X - Axis
- d3 replacing semicolon with comma
- D3.js: Loading multiple networks from JSON files w/ Force Layout
- how to create pie chart using dc.js
- Firefox struggling about d3.js svg library?
- D3js Tooltip not generating correctly
- Javascript summing arrays with using d3.nest()
- toggling between two functions
- d3 vary line/area color along x-axis in line graph
- How to place all focus appended text at a same, fixed position in d3.js?