D3, how to ungroup x-axis similar values

Asked Apr 27 '15 at 15:17

Active Apr 27 '15 at 15:17

Viewed 127 times

I am new to d3. I am trying to display all values on the x-axis, however the code is grouping similar values. How can I ungroup so that all values show. Even duplicates. Here is my code:

//JSON DATA
var data = [
  {
    "due": 89.99, 
    "datestr": "2012-12-01 00:00:00", 
    "paid": 89.99
  }, 
  {
    "due": 89.99, 
    "datestr": "2013-01-01 00:00:00", 
    "paid": 101.25
  }, 
  {
    "due": 109.99, 
    "datestr": "2013-02-01 00:00:00", 
    "paid": 143.69
  }

];

//Set Axis
var due = d3.scale.ordinal().rangeRoundBands([0, width])
                  .domain(data.map(function (d) { return d.due; }));

asked Apr 27 '15 at 15:17

K2R

1

See full code here https://jsfiddle.net/keturp/df00fyuu/ – K2R Apr 27 '15 at 15:19
The D3 scales will always map duplicates to the same value. You could use the index of the values for the scale/axis instead of the actual value. – Lars Kotthoff Apr 27 '15 at 16:47
what is the correct way to do that? Here is what I tried: `var due = d3.scale.linear().range([0, width]).domain([0, d[i].due]);` – K2R Apr 27 '15 at 17:51
You would use just the index, i.e. just `i`. – Lars Kotthoff Apr 27 '15 at 17:58
I'm not following. I tried using i, and that did not work. – K2R Apr 27 '15 at 18:12
Can you post the code you've tried please? – Lars Kotthoff Apr 27 '15 at 19:24
I tried a few variations. Here is one: `var due = d3.scale.linear().range([0, width]).domain(function(d, i) { return i; });` – K2R Apr 27 '15 at 19:37
Basically what I am trying to do is post the Object Value 'due' as the x-axis, without any grouping. – K2R Apr 27 '15 at 19:39
Well your domain would be `[0, data.length - 1]` then. – Lars Kotthoff Apr 27 '15 at 20:17
I think that's close. That will show the data length. However I need specifically the 'due' information to be shown. you can see the updated code,, http://jsfiddle.net/keturp/df00fyuu/ – K2R Apr 27 '15 at 20:25
You can use the [`.tickFormat()` function](https://github.com/mbostock/d3/wiki/SVG-Axes#tickFormat) to do this -- index into `data` with the index given. – Lars Kotthoff Apr 27 '15 at 20:49
That worked! but it doesn't split across the chart. do you know how I can accomplish that? – K2R Apr 27 '15 at 21:03
I don't know what you mean by "split across the chart". – Lars Kotthoff Apr 27 '15 at 22:14

D3, how to ungroup x-axis similar values

0 Answers0