当前位置:  开发笔记 > 编程语言 > 正文

D3.js多个y轴具有相同的刻度位置?

如何解决《D3.js多个y轴具有相同的刻度位置?》经验,为你挑选了1个好方法。

我有3个y轴和一个x轴的图表,必须放大所有3轴.

! DEMO


是)我有的

是否可以设置所有3 y轴,中心为0?如果我缩放图表滴答必须保持在同一个地方?

或者,也许,说"在0值之间始终只显示10个滴答".例如:
范围1 - > [10..0 ..- 10]
范围2 - > [350..0 ..- 350]
范围3 - > [0,1..0..0,9]

但是来自所有3个范围的所有蜱必须保持在相同的位置.

需要相同的观点


UPDATE

//zooming
var zoom0 = d3.behavior.zoom().x(x).y(_y[0]).on("zoom", zoomed);
var zoom1 = d3.behavior.zoom().y(_y[1]);
var zoom2 = d3.behavior.zoom().y(_y[2]);
***
function zoomed() {
  zoom1.scale(zoom0.scale());
  zoom1.translate(zoom0.translate());
  zoom2.scale(zoom0.scale());
  zoom2.translate(zoom0.translate());
  graph.select(".x.axis").call(xAxis);
  for (var i = 0; i < _y.length; i++) {
    graph.select(".y.ax" + i).call(_yAxis[i]);
    graph.select('.line.ax' + i).attr('d', _lineGenerator(i));
  }
}

更新v3:

在此输入图像描述


更新第4版:

在此输入图像描述

是否可以在y轴上的刻度之间设置填充?或者更好地说"禁用刻度线之间的距离,并将其设置为固定值"

.tickValues() - doesn't help in this case...
function create_Y_axes() {
  var _key, _currentKeyIndex, yDomain_before, yDomain_after,  yD_min,  yD_max,  _index;

  for (var i = 0; i < series.length; i++) {

    _key = series[i]["unit"];
    _currentKeyIndex = yCategories.indexOf(_key);

    if (_currentKeyIndex === -1) {
      //If key not found in array
      yCategories.push(_key);

      series[i]["yAxis"] = yCategories.length - 1;

      _y.push(
        d3.scale.linear()
          .domain(d3.extent(series[i]["UNIT_DATA"], function(d,i){return d.wert;}))
          .range([chartHeight, 0])
          .nice()
      );

    } else {
      series[i]["yAxis"] = _currentKeyIndex;
    }
  } //for

  var yDomain,min, max, ticks = 10, r1,r2,range,stepL,stepR, t, tArray, h;

  for (var i = 0; i < _y.length; i++) {

    yDomain = _y[i].domain();// [-60, 60]

    min = yDomain[0];// -60
    max = yDomain[1];//  60

    h = Math.floor((ticks / 2));

    stepL = (Math.abs(min / h));
    stepR = (Math.abs(max / h));

    r1 = d3.range(min, 0 - stepL, stepL);
    r2 = d3.range(0, max + stepR, stepR);

    tArray = d3.merge([r1, r2]);

    t = d3.scale.ordinal().domain(tArray).rangePoints([chartHeight, 0]).domain();
      _yAxis.push(
        d3.svg.axis()
              .scale(_y[i])
              .orient("left")
              .tickPadding(5)
              .tickValues(t)
              .tickFormat(function(d){return d.toFixed(2);})
      );

  } 

}// createYaxes()

更新v5:

这就是我需要的:

在此输入图像描述

我创建了这个没有d3.axis.***的3个y轴,但是这个解决方案非常糟糕:)我会在我的图表中使用d3-API!

请帮我!!!!


brenzy.. 5

以下是您的代码修改,以使得滴答在0处排成一行.需要注意的一些更改在代码中通过以下方式进行注释:

//***

主要变化是,如果您希望刻度线在零处排列并且在所有三个轴上具有相同的刻度数高于和低于零,则您的域应该以零为中心.

我在每个缩放/平移上重新生成刻度值,显示最小值,最大值和等间距值.您可能想要进行一些舍入,或者如果它在可见域中,则强制零为刻度值.




  
  
  







1> brenzy..:

以下是您的代码修改,以使得滴答在0处排成一行.需要注意的一些更改在代码中通过以下方式进行注释:

//***

主要变化是,如果您希望刻度线在零处排列并且在所有三个轴上具有相同的刻度数高于和低于零,则您的域应该以零为中心.

我在每个缩放/平移上重新生成刻度值,显示最小值,最大值和等间距值.您可能想要进行一些舍入,或者如果它在可见域中,则强制零为刻度值.




  
  
  





推荐阅读
mobiledu2402852413
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有