D3.js中的单个yAxis设置

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，并将引用传递给您的createsvg函数。

＆＃13;

＆＃13;

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');
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;