Individual yAxis setting in D3.js

Question

I will create a line chart by D3.js, data come from local array. But I cannot set the yAxis for each chart, some value cannot be display I found most of method are using csv or json file to use different domain of yAxis, is there any way that I can use local array to make an individual setting?

var margin = {top: 60, right: 40, bottom: 50, left: 60};
var w = 580 ;
var h = 300 ;


var dataset = [];
var Num = 20
for (var i=0; i < 50; i++){
  var newNum = Num + (5 - Math.floor(Math.random() * 10));
  dataset.push(newNum);
  Num = newNum;
}

var dataset1 = [];
var Num = 20
for (var i=0; i < 50; i++){
  var newNum = Num + (5 - Math.floor(Math.random() * 10));
  dataset1.push(newNum);
  Num = newNum;
}

console.log(dataset)

var Ymax = d3.max(dataset),
  Ymin = d3.min(dataset);

var Ymax1 = d3.max(dataset1),
  Ymin1 = d3.min(dataset1);

var xScale = d3.scale.linear().domain([0, dataset.length]).range([0, w]);
var yScale = d3.scale.linear().domain([Ymin, Ymax]).range([h, 0]);


var line = d3.svg.line()
  .x(function(d,i) { 
    return xScale(i+1); 
  })
  .y(function(d) { 
    return yScale(d); 
  });

createsvg("chart", dataset);
createsvg("chart1", dataset1);
function createsvg(id, data){

var svg = d3.select('#'+id).append('svg')
  .attr('width', w + margin.left + margin.right)
  .attr('height', h + margin.top + margin.bottom)
  .append('g') 
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var xAxis = d3.svg.axis().scale(xScale);
svg.append('g')
  .attr('class', 'x axis')
  .attr('transform', 'translate(0,' + h + ')')
  .call(xAxis);


var yAxisLeft = d3.svg.axis().scale(yScale).ticks(4).orient('left');
svg.append('g')
  .attr('class', 'y axis')
  .attr('transform', 'translate(0,0)')
  .call(yAxisLeft);

svg.append('path').attr('d', line(data));
}

Answer 1

You just need to create two separate yScales, and pass a reference in to your createsvg function.

 var margin = {top: 60, right: 40, bottom: 50, left: 60}; var w = 580 ; var h = 300 ; var dataset = []; var Num = 20 for (var i=0; i < 50; i++){ var newNum = Num + (5 - Math.floor(Math.random() * 10)); dataset.push(newNum); Num = newNum; } var dataset1 = []; var Num = 20 for (var i=0; i < 50; i++){ var newNum = Num + (5 - Math.floor(Math.random() * 10)); dataset1.push(newNum); Num = newNum; } console.log(dataset) var Ymax = d3.max(dataset), Ymin = d3.min(dataset); var Ymax1 = d3.max(dataset1), Ymin1 = d3.min(dataset1); var xScale = d3.scale.linear().domain([0, dataset.length]).range([0, w]); var yScale = d3.scale.linear().domain([Ymin, Ymax]).range([h, 0]); var yScale1 = d3.scale.linear().domain([Ymin1, Ymax1]).range([h, 0]); var line = d3.svg.line() .x(function(d,i) { return xScale(i+1); }) .y(function(d) { return yScale(d); }); createsvg("chart", dataset, yScale); createsvg("chart1", dataset1, yScale1); function createsvg(id, data, yScaleUse){ var svg = d3.select('body').append('svg') .attr('width', w + margin.left + margin.right) .attr('height', h + margin.top + margin.bottom) .append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); var xAxis = d3.svg.axis().scale(xScale); svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + h + ')') .call(xAxis); var yAxisLeft = d3.svg.axis().scale(yScaleUse).ticks(4).orient('left'); svg.append('g') .attr('class', 'y axis') .attr('transform', 'translate(0,0)') .call(yAxisLeft); svg.append('path') .attr('d', line(data)) .attr('class', 'line'); }

 .line { fill: none; stroke: steelblue; stroke-width: 1.5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>