score:34
Accepted answer
Two things:
- Pass
dc.units.ordinal
as the parameter to.xUnits()
. - Pass an ordinal scale function to
.x()
.
Here's what I mean:
.x(d3.scale.ordinal().domain(["", "a", "b", "c"])) // Need empty val to offset first value
.xUnits(dc.units.ordinal) // Tell dc.js that we're using an ordinal x-axis
See this JSFiddle: http://jsfiddle.net/reblace/tbamW/156/
For some reason, I couldn't get renderHorizontalGridLines()
or renderVerticalGridLines()
to work, but the rest is good.
score:7
Adding
.x(d3.scale.ordinal().domain(data.map(function (d) {return d.Alphabet_Type; })))
solved the problem.
Source: stackoverflow.com
Related Query
- Using an ordinal scale ('d3.scale.ordinal') for the x-axis in a bar chart
- Make simple bar chart using C3 with separate columns on the x axis
- dc.js bar chart with ordinal x axis scale doesn't render correctly
- How to modify axis labels in d3 for a stacked bar chart when the axis labels are mapped as part of the scale's domain
- Bar chart for yearly summaries: use ordinal scale or time scale?
- How do I set the X values for a singled stacked horizontal bar chart using d3.js?
- How to adjust the scale in the y-axis for a bar chart in D3 v6?
- Create Stacked Bar chart for Timeseries X axis using C3.js
- X axis not displaying on bar chart using d3.js
- x axis labels overlapping for grouped category bar chart in d3
- Using d3.layout.stack() and parsing csv for bar chart
- Stacked Bar Chart using d3.js stack layout; the bar sections not always in correct place
- trying to get the circles next to the y axis labels in bar chart d3.js
- Transitioning a bar chart with negative values for the width
- Create a padding for the first and last data points using a time scale
- horizontal lines along the y axis d3 bar chart
- Getting the scale right for a line chart for a simple CSV in D3 v4
- Is there a way to add horizontal scroll bar for a bar chart made using dimplejs?
- Transition for grouped bar chart in d3 when updating the data values
- Maintain color mapping for Stacked/Grouped Multi-Bar Chart using NVD3 when the series count fluxuates
- Is this JSON structure suitable for a stacked bar chart using d3.js?
- Returning default color for items not in domain, using d3.js scale ordinal
- Can't set the number of ticks on time-based x-axis to custom amount for bar chart
- How to use log scale to show proper stacked bar chart using d3 JS?
- d3.js Stacked Bar Chart working for one dataset but not the other
- Unable to reset the focus ordinal bar chart
- Error setting the domain for a grouped bar chart
- D3js: scale an axis on every bar chart
- How can I create a basic bar chart with unique counts on the y axis and a category on the x axis?
- after making bar chart inside SVG using D3 , it is not fitting the entire SVG
More Query from same tag
- Why d3.extent without parseInt returns the max value of "9" on column num_colors on Bob Ross dataset?
- Is it possible, to highlight bars in Dimple.js bar chart, based on y-axis value?
- d3.js Nice End Ticks Exceeding Domain
- Add number / text inside d3 path
- How topojson's world map scale has set?
- D3: How to refresh a chart with new data?
- D3: Referencing Drop Down Menu Selection
- Why svg text is unselectable?
- d3 creating A multiseries chart using d3
- What is the best way to update d3 charts using - AJAX
- Don't show negative sign d3 axis labels
- d3 select element with class name that contains a string
- dimple js measure axis values
- D3 - Add event to bars
- tree using D3 tree v4 . Need different shapes for inner node and leaf node
- D3 heatmap convert code to use json instead of tsv
- dc.js composite chart errors
- D3.js: Text labels dissapear when I click on the second svg element
- put 2 first letters in bold in c3.js - d3.js
- How do I stop graphs appearing cropped when using D3 splines?
- Draw gridlines at the average (or median) values of a range in d3.js
- Server-side vs. Client side computations
- Line charts in d3.js using d3.chart.js
- Onion Ring Chart with nested elements
- Transition.each in d3 doesn't interpolate attributes
- d3.js make axis ticks clickable
- Error all browsers but Firefox trying to change background image with d3.js
- How would this d3 code be updated from v3 to v4?
- Transition on axis -- losing grid lines (ticksize), how to transition in correct order?
- Graphing code size