score:30
bar charts in dc.js use the xunits function to automatically calculate the width of the bars in a histogram based on the range of your x-axis. if you want to set the width to a static value you can use a custom xunits function for example:
chart.xunits(function(){return 10;});
this should give you a more fitting width.
score:4
the suggestion given by user2129903 to use the chart.xunits()
to specify a custom xunits
function is indeed the way to go.
i'd like to add to that an example and a bit of an explanation as to choose the return value of that custom function.
the doc says:
this function is expected to return a javascript array of all data points on x axis, or the number of points on the axis.
that is, assuming you want to make a histogram, you can either directly specify the number of bins or calculate it from your desired bin size and return that from that function. you need to specify this when the numeric keys of your grouping are not successive, equidistant integers.
here is an example:
<!doctype html><meta charset="utf-8">
<head>
<link rel="stylesheet" type="text/css" href="js/dc.css"/>
<script src="js/crossfilter.js"></script>
<script src="js/d3.js"></script>
<script src="js/dc.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
<script>
// generate data
var min_value = 0, max_value = 18, value_range = max_value-min_value;
var data = [];
for (var i = 0; i < 1000; i++)
data.push({x: math.random()*value_range+min_value});
// create crossfilter dimension for column x
var cf = crossfilter(data),
x = cf.dimension(function(d) {return d.x;});
// create histogram: group values to `number_of_bins` bins
var number_of_bins = 10,
bin_width = value_range/number_of_bins,
//number_of_bins = value_range/bin_width,
x_grouped = x.group(
function(d) {return math.floor(d/bin_width)*bin_width;});
// generate chart
dc.barchart("#chart").dimension(x)
.group(x_grouped)
.x(d3.scale.linear().domain([min_value,max_value]))
// let the bar widths be adjusted correctly
.xunits(function(){return number_of_bins;})
.xaxis();
dc.renderall();
</script>
note that in this example it can also work to retrieve the number of bins or the bins' key values from the group object itself, e.g., like this
// number of bins
chart.xunits(function(){return x_grouped.all().length;});
// bins' key values
chart.xunits(function(){return x_grouped.all().map(function(d) {return d.key;});});
this will however fail (i.e., produce the wrong bar width), when there are empty bins.
for reference:
Source: stackoverflow.com
Related Query
- Properly display bin width in barChart using dc.js and crossfilter.js
- IE11 does not accept SVG height and width when using D3
- How to create a histogram using d3.js and crossfilter data?
- Angular 4 : properly importing and using d3 and d3-cloud and their typings
- Using d3 in meteor on windows 8.1, how can I display a world map, zoomed in on the US, with country borders and US state borders?
- Reference errors using dc.js, d3.js and crossfilter
- Chart min max values from each given day using crossfilter and dc.js
- Distribute nodes evenly around central node using a relative SVG width and height
- How to parse an array of objects using data method of d3js and display it in tool tip?
- using a multi array for plotting data on a scatter with dc.js, d3 and crossfilter
- How to properly transpose X and Y axes using the D3 axis commands?
- how to get data from mongodb and display as a d3 chart using nodejs
- How to filter data using DC, D3, and Crossfilter to produce a bar chart?
- Display geojson on a map using d3.js and d3-tile
- Modify and display abbreviated data in the table generated using D3
- Can't get multiple graphs to display on one page using D3 and Angularjs-nvd3-directives
- Properly using D3 `data` method with a function and data set passed
- how to adjust width and height when i click the rect in multilevel treeemap using d3.js?
- Different filters for different charts using dc.js and crossfilter
- Parsing Error While using D3 and Crossfilter with CSV
- d3.js brush() inherits incorrect height and width From svg parent using viewBox
- Display Bar Chart for Last week, Last Month, and Last Year Data from JSON using D3.js
- D3 map should read second external json data using queue and display on Hover
- How can I set max value(range) for y-axis and bar width of a bar chart using nvd3.js
- Retrieving data from api (request/node.js) and trying to display it using d3
- How to get data on x-axis and number of times occured on y-axis using crossfilter JS?
- How can we create multi column table using multi array JSON using d3 and crossfilter javascript frameworks
- Using Crossfilter to Filter and Group for Histogram
- Using crossfilter with dc.js and d3.js - how to get csv year data into date format?
- D3.js: How to get the computed width and height for an arbitrary element?
More Query from same tag
- how to generate a list of successive colors in javascript
- d3: UI lags when mouse events attached to 1000 nodes
- D3 change line stroke-width by hovering over legend
- mouseout/mouseleave gets fired when mouse moves INSIDE the svg path element
- Nest multiple rects inside multiple svg containers with d3?
- Producing an area chart in D3 similar to Highcharts Basic Area
- scaleQuantile function doesn't output what I expect
- Why are some of the grid lines randomly disappearing on my responsive D3 chart?
- render NUTS data to a map in a browser with d3.js
- D3 Draw Path with coordinate ML
- Vertical line in D3 plot move on zoom/pan
- Rxjs wrapping other libraries functions from D3 (Observable)
- How to show circles (created using JSON data) in reverse order using a delay function?
- How to make the extent of a brush match the size of the parent element?
- D3 line generator only generating NaN values
- c3js convert xAxis count from decimal to Integer
- d3 sankey diagram - how to set the y position
- .splice method not removing correct item in array in d3
- IE9 detects z-index events different than Chrome/Firefox - how to fix?
- d3Js - how to arrange my values as around the 360d and automate data in a circle?
- d3.js sankey diagram - change particle density and shape
- NVD3 - Positioning of xAxis labels not working
- CSS equivalent to .attr("data-html", "true")
- Font Awesome Icon Cannot Be Exported With D3JS Graph Using Filesaver.js
- d3js responsive force layout not working in IE 11
- how to display the small value arcs in the d3.js pie chart?
- D3 stacked area chart tsv to csv conversion problems
- Ignore duplicate date values
- How to make a d3 plugin?
- Is it possible to change the individual lengths of the arcs within a D3 Sunburst Diagram?