D3.js 中的单个 yAxis 设置答案

【问题标题】：Individual yAxis setting in D3.jsD3.js 中的单个 yAxis 设置
【发布时间】：2016-09-21 12:01:27
【问题描述】：

我将通过 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));
}

【问题讨论】：

你能分享一下 JSON 吗？

标签： javascript d3.js charts

【解决方案1】：

您只需要创建两个单独的 yScale，并将引用传递给您的 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;
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

【讨论】：