CODEWITHSUNDEEP
javascriptd3.jsscaling
supaplex
supaplex

Reputation: 157

X-axis scaling with D3 JavaScript

Here is my working DEMO.

I have two problems here:

  1. I don't know how to scale x-axis so that it only shows 2011-2012-2013 etc. (Currently it displays 2011-2011.5-2012).
  2. When I have a long list of datajson, chart doesn't fit to the current window. Therefore, I can't see all of the researcher names in that case.

I would appreciate any help.

Thanks

Upvotes: 0

Views: 49

Answers (1)

jmgross
jmgross

Reputation: 2346

First part

You can use the .ticksfunction to specify number of values in your axis :

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("top")
        .ticks(end_year-start_year);

jsFiddle

Second part

You can make a dynamic height for your graph like this : 

var margin = {top: 20, right: 200, bottom: 0, left: 20},
        width = 300,
        height = datajson.length * 20 + margin.top + margin.bottom;

Maybe, you just have to adapt the item height value

jsFiddle

Upvotes: 1

Related Questions