如何访问nvd3中d3图的x和y刻度?

时间:2013-10-15 23:16:50

标签: javascript d3.js nvd3.js

我正在使用nvd3绘制一些系列,并希望在绘图中添加一些任意矩形。如何访问d3图的基础x和y比例,这样我就可以将矩形坐标转换为svg像素坐标,使其与现有数据的比例相同:

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;
});

1 个答案:

答案 0 :(得分:4)

您可以通过轴访问比例,即chart.xAxis.scale()等。要将它们应用于坐标,您可以执行类似

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