怎么在d3.js中自定义一个多y轴折线图-创新互联

这篇文章给大家介绍怎么在d3.js中自定义一个多y轴折线图，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

企业建站必须是能够以充分展现企业形象为主要目的，是企业文化与产品对外扩展宣传的重要窗口，一个合格的网站不仅仅能为公司带来巨大的互联网上的收集和信息发布平台，成都创新互联面向各种领域：成都湿喷机等网站设计、营销型网站解决方案、网站设计等建站排名服务。

1.初始化一个svg作为容器，之后所有的点线面都是在这个容器里边画了

svg.select('#id')
  .append('svg')
  .attr('width', width)
  .attr('height', height)

2.定义比例尺 scale ，定义域 domain 显示的刻度范围,值域 range 实际数据刻度

// x轴以时间为刻度
this.x = d3
 .scaleTime()
 .domain([this.beginTime, this.endTime])
 .range([0, this.width]);

// y轴按照像素值为刻度，所有数据需按照比例转换计算
this.y = d3
 .scaleLinear()
 .domain([0, this.height])
 .range([this.height, 0]);

3.定义轴 axis , axis 需要和 scale 结合使用，作为参数传入 axis(scale) 。

其中， ticks 表示刻度数量，传入数值即可，注意一点， ticks 默认会取 2,5,10 这三个数中的一个，如果你传入一个其他的数，它会根据实际尺寸找一个接近的值（这里还涉及到倍数情况下，详细了解可查阅官方api）；

如果刻度想要自定义需要利用 tickValues([NO1,NO2,NO3...]) 实现； tickSize 表示刻度尺寸，设置为容器svg的宽高即实现了全图标尺效果。

this.xAxis = d3
 .axisTop(this.x)
 // .ticks(d3.timeHour.every(4))
 .tickValues(d3.timeHour.range(this.beginTime, this.endTime, 4))
 .tickSize(this.height)
 .tickFormat(function (d, i) {
  // return d.getHours();
  return;
 });

this.yAxis = d3
 .axisLeft()
 .scale(this.y)
 .tickValues(d3.range(0, this.height, this.height / 40))
 .tickSize(-this.width)
 .tickFormat(function (d, i) {
  return;
 });

4.定义折线模板

// 折线模板
this.line = d3
 .line()
 .x(function (d) {
  return that.x(d.datetime);
 })
 .y(function (d) {
  return that.y(d.svgValue);
 });

关于怎么在d3.js中自定义一个多y轴折线图就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

分享题目：怎么在d3.js中自定义一个多y轴折线图-创新互联
分享URL：http://bjjierui.cn/article/dgiopp.html