NVD3 - 仅在轴上显示刻度线

Answer 1

NVD3 似乎没有真正的方法可以做到这一点，因为它没有提供在轴上显示刻度线的方法。但是，我们可以通过获取图表 SVG 然后对其进行修改来添加我们自己的刻度线。

我附上了一个向 X 轴添加刻度线的示例，它基本上是基于这里的 jsfiddle 稍微修改的：http://jsfiddle.net/3r88bgjw

var data;
data = [{
  values: [],
}, ];

var i, x;
var prevVal = 3000;
var tickCount = 2000;
for (i = 0; i < tickCount; i++) {
  x = 1425096000 + i * 10 * 60; // data points every ten minutes
  if (Math.random() < 0.8) { // add some gaps
    prevVal += (Math.random() - 0.5) * 500;
    if (prevVal <= 0) {
      prevVal = Math.random() * 100;
    }
    data[0].values.push({
      x: x * 1000,
      y: prevVal
    });
  }
}

var chart;

nv.addGraph(function() {
  chart = nv.models.historicalBarChart();
  chart.xScale(d3.time.scale()) // use a time scale instead of plain numbers in order to get nice round default values in the axis
    .color(['#68c'])
    .useInteractiveGuideline(true) // check out the css that turns the guideline into this nice thing
    .margin({
      "left": 80,
      "right": 50,
      "top": 20,
      "bottom": 30,
    })
    .noData("There is no data to display.")
    .duration(0);

  var tickMultiFormat = d3.time.format.multi([
    ["%-I:%M%p", function(d) {
      return d.getMinutes();
    }], // not the beginning of the hour
    ["%-I%p", function(d) {
      return d.getHours();
    }], // not midnight
    ["%b %-d", function(d) {
      return d.getDate() != 1;
    }], // not the first of the month
    ["%b %-d", function(d) {
      return d.getMonth();
    }], // not Jan 1st
    ["%Y", function() {
      return true;
    }]
  ]);
  chart.xAxis
    .showMaxMin(false)
    .tickPadding(10)
    .tickFormat(function(d) {
      return tickMultiFormat(new Date(d));
    });

  chart.yAxis
    .tickFormat(d3.format(",.0f"));

  var svgElem = d3.select('#chart svg');
  svgElem
    .datum(data)
    .transition()
    .call(chart);

  // make our own x-axis tick marks because NVD3 doesn't provide any
  var tickY2 = chart.yAxis.scale().range()[1];
  var lineElems = svgElem
    .select('.nv-x.nv-axis.nvd3-svg')
    .select('.nvd3.nv-wrap.nv-axis')
    .select('g')
    .selectAll('.tick')
    .data(chart.xScale().ticks())
    .append('line')
    .attr('class', 'x-axis-tick-mark')
    .attr('x2', 0)
    .attr('y1', tickY2 + 7)
    .attr('y2', tickY2)
    .attr('stroke-width', 3);

  // set up the tooltip to display full dates
  var tsFormat = d3.time.format('%b %-d, %Y %I:%M%p');
  var contentGenerator = chart.interactiveLayer.tooltip.contentGenerator();
  var tooltip = chart.interactiveLayer.tooltip;
  tooltip.contentGenerator(function(d) {
    d.value = d.series[0].data.x;
    return contentGenerator(d);
  });
  tooltip.headerFormatter(function(d) {
    return tsFormat(new Date(d));
  });

  return chart;
});

<div>Try resizing the panel to see the various types of time labels.</div>
<br>
<div id="chart">
  <svg></svg>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.js"></script>