CODEWITHSUNDEEP
javascriptsvgd3.js
Philipp_Kats
Philipp_Kats

Reputation: 4214

d3 axis sits in [0,1] domain

I am drawing a simple (4 options) radar chart with d3. But even with manualy defined scale my axis draws on domain [0,1] both in terms of pixel size (length) and labeled numbers.

Here is the code:

var scl = d3.scale.linear().domain([0, 100]).range([0, 100]);
var x1Axis = d3.svg.axis(scl);

d3.select('#radarWrapper svg')
  .append('g')
  .attr("class", "axis")
  .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")")
  .call(x1Axis);

this draws a stupid one-point scale in the center of svg, without any relation to defined scale: enter image description here

Upvotes: 0

Views: 70

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109282

The scale to use is not set as an argument to the constructor to d3.svg.axis() (it doesn't take any arguments), but through the .scale() method:

var x1Axis = d3.svg.axis().scale(scl);

Complete demo here.

Upvotes: 2

Related Questions