Индивидуальная настройка yAxis в D3.js

Question

Я создам линейную диаграмму D3.js, данные поступают из локального массива. Но я не могу установить yAxis для каждой диаграммы, какое-то значение не может быть отображено Я нашел, что большинство методов использует файл csv или json для использования другого домена yAxis, есть ли способ, которым я могу использовать локальный массив, чтобы сделать индивидуальная настройка?

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

Вам просто нужно создать два отдельных yScales и передать ссылку на вашу функцию createvg.

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>