NVD3 - show tick lines only on axes

Question

NVD3 - show tick lines only on axes

77 views Asked by Vada Poché At 31 July 2022 at 08:02

TLDR: I have an NVD3 graph that shows tick lines all across the axis, but I would like to change it so it only displays on the axis lines if possible.

Here is a live example:

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
            chart: {
                type: 'lineChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 80,
                    left: 55
                },
                x: function(d){ return d.x; },
                y: function(d){ return d.y; },
                useInteractiveGuideline: true,
                xAxis: {
                    axisLabel: 'Timeline',
                    tickFormat: function(d) {
                        return d3.time.format('%B %d')(new Date(d))
                    },
                    ticks: 6,
                    showMaxMin: false
                },
                yAxis: {
                    axisLabel: 'Molecular density (kg/m^3)',
                    tickFormat: function(d){
                        return d3.format('.02f')(d);
                    },
                    axisLabelDistance: -10,
                    showMaxMin: false
                }
            }
        };

        $scope.data = [{"key":"K7 molecules","values":[{"x":1435708800000,"y":8},{"x":1435795200000,"y":9},{"x":1435881600000,"y":8},{"x":1435968000000,"y":8},{"x":1436054400000,"y":9},{"x":1436140800000,"y":9},{"x":1436227200000,"y":8},{"x":1436313600000,"y":8},{"x":1436400000000,"y":9},{"x":1436486400000,"y":9},{"x":1436572800000,"y":7},{"x":1436659200000,"y":8}],"area":true,"color":"#0CB3EE"},{"key":"N41 type C molecules","values":[{"x":1435708800000,"y":8},{"x":1435795200000,"y":7},{"x":1435881600000,"y":8},{"x":1435968000000,"y":9},{"x":1436054400000,"y":7},{"x":1436140800000,"y":9},{"x":1436227200000,"y":8},{"x":1436313600000,"y":9},{"x":1436400000000,"y":9},{"x":1436486400000,"y":9},{"x":1436572800000,"y":9},{"x":1436659200000,"y":8}],"area":true,"color":"#383838"}];
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Line Chart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <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.1/nv.d3.min.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.1/dist/angular-nvd3.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
    
  </body>

</html>

Is there any way I could make the tick lines appear just on the axes line only? To make it clear, this is what it looks like:

I used a different library to generate the following plot, and I would like the tick lines to appear just on the axis lines like this example instead:

Original Q&A

There are 1 answers

**Vada Poché** · Accepted Answer · 2022-08-04T01:56:16+00:00

It appears that there is no real way to do this with NVD3 as it does not provide a way to show tick marks on the axis. However, we could add our own tick marks by fetching the chart SVG and then modifying it.

I've attached an example that adds tick marks to X-Axis, and it is basically slightly modified based on this jsfiddle here: 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>

TechQA.

NVD3 - show tick lines only on axes

There are 1 answers

Related Questions in D3.JS

Related Questions in NVD3.JS

Popular Questions

Popular Tags

Trending Questions