将值转换为现有xScale

Question

我需要在vnd3上写一行，如何将它转换为nvd3坐标系，如果可以将我的值转换为轴，并返回转换值，那么我可以绘制一个＆＃39; g＆＃ 39;使用translate来画线。

例如，

 

我想添加一条蓝线，假设值为18，那么如何在exing轴上写出这条线。我认为解决方法是： 计算xScale以将新值转换为图表域，然后使用＆＃39; g＆＃39;翻译，

我是对的吗？

Answer 1

创建nvd3模型时，可以调用其上的各种函数来获取比例，轴和其他可配置参数。

我找不到记录这个相当大的API表面的地方。但是，源代码易于阅读和解决。

例如，lineChart model具有以下API：

  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  // expose chart's sub-components
  chart.dispatch = dispatch;
  chart.lines = lines;
  chart.legend = legend;
  chart.xAxis = xAxis;
  chart.yAxis = yAxis;
  chart.interactiveLayer = interactiveLayer;

  d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'xRange', 'yRange'
    , 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'useVoronoi','id', 'interpolate');

  chart.options = nv.utils.optionsFunc.bind(chart);

  chart.margin = function(_) { ... }
  chart.width = function(_) { ... }
  chart.height = function(_) { ... }
  chart.color = function(_) { ... }

  chart.showLegend = function(_) { ... }
  chart.showXAxis = function(_) { ... }
  chart.showYAxis = function(_) { ... }
  chart.rightAlignYAxis = function(_) { ... }
  chart.useInteractiveGuideline = function(_) { ... }
  chart.tooltips = function(_) { ... }
  chart.tooltipContent = function(_) { ... }
  chart.state = function(_) { ... }
  chart.defaultState = function(_) { ... }
  chart.noData = function(_) { ... }

  chart.transitionDuration = function(_) { ... }

这些功能大部分都是不言自明的。

您可以分别通过调用函数xScale和margins来访问model.xScale()和model.margin()。然后，您可以按照建议在内部创建一个g line并将其放在图表上。