如何访问nvd3中d3图的x和y刻度？ [英] How do I access the x- and y-scale of the d3 plot in nvd3?

问题描述

我使用nvd3绘制一些系列，并想添加一些任意的矩形到绘图。如何访问d3绘图的基本x和y标度，所以我可以将我的矩形坐标转换为svg像素坐标，使其与现有数据的大小相同：

I'm using nvd3 to plot some series and want to add some arbitrary rectangles to the plot. How can I access the underlying x- and y-scale for the d3 plot so I can transform my rectangles' coordinates into the svg pixel coordinates so that are on the same scale as the existing data:

function d3_render(response) {

nv.addGraph(function() {
  var data  = response;


  chart.xAxis
      .axisLabel('Time (s)')
      .tickFormat(d3.format(',f'));

  chart.x2Axis
      .tickFormat(d3.format(',f'));


  chart.yAxis
      .axisLabel('Units normalized')
      .tickFormat(d3.format(',.2f'));

  chart.y2Axis
      .tickFormat(d3.format(',.2f'));

  d3.select('#chart svg')
      .datum(data)
    .transition().duration(1000)
      .call(chart);

  // Adding my rectangle here ...
  d3.select('#chart svg')
      .append('g')
      .append('rect')
      .attr('x', 50) // need to transform to same scale.
      .attr('y', 50) // need to transform to same scale.
      .attr('width', 100) // need to transform to same scale.
      .attr('height', 100) // need to transform to same scale.
      .attr('fill', 'red')



  nv.utils.windowResize(chart.update);

  return chart;
});

推荐答案

code> chart.xAxis.scale（）等。要应用这些到你的坐标，你会做一些像

You can access the scales through the axes, i.e. chart.xAxis.scale() and so on. To apply those to your coordinates, you would do something like

.attr("x", chart.xAxis.scale()(50));

这篇关于如何访问nvd3中d3图的x和y刻度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！