Nvd3.js-Line Chart with View Finder: rotate axis labels and display line values ​​when mouse

Question

I am new to this forum, and my English skills are not the best, but I will try to do my best :).

There is an example line chart with View Finder on the nvd3 website. This is the one (example \ lineWithFocusChart.html, nvd3 zip package) that I have been working with for the past 2 days. I made only one change in the example format: I use dates on the X axis instead of normal numbers.

Here are my 2 questions:

1- How can I rotate all tick marks on the x axis? My dates are too long (% x% X, day and time), and I want them to rotate in another to improve their viewing. I can only get 2 ticks rotated (max and min, x-axis edges). This is the code that I am changing inside the "switch (axis.orient ()) block in nv.d3.js:

case 'bottom': axisLabel.enter().append('text').attr('class', 'axislabel') .attr('text-anchor', 'middle') .attr('y', 25); axisLabel .attr('x', scale.range()[1] / 2); if (showMaxMin) { var axisMaxMin = wrap.selectAll('g.axisMaxMin') .data(scale.domain()); axisMaxMin.enter().append('g').attr('class', 'axisMaxMin').append('text'); axisMaxMin.exit().remove(); axisMaxMin .attr('transform', function(d,i) { return 'translate(' + scale(d) + ',0)' }) .select('text') .attr('dy', '.71em') .attr('y', axis.tickPadding()) .attr('text-anchor', 'middle') .text(function(d,i) { return ('' + axis.tickFormat()(d)).match('NaN') ? '' : axis.tickFormat()(d) }) .attr('transform', 'rotate(45)') ; d3.transition(axisMaxMin) .attr('transform', function(d,i) { return 'translate(' + scale.range()[i] + ',0)' }); } break; 

As you can check, I put .attr ('transform', 'rotate (45)') as the new attribute, so max and min ticks are rotated (axisMaxMin). I tried this path (in the nv.d3.js file) with other text elements that I think are associated with ticks x, but it does not work. Any ideas? Where do I need to convert to show that all X-tags are rotated?

2- In this example, when you hover over a line, no event is fired to show the value (x, y) associated with the point. How can I show these values? I tried to copy-paste the methods used in other examples where these values ​​are shown, but it does not work. Any idea?

Thank you for sharing your time and knowledge: D.

Answer 1

An update has recently appeared for nvd3, which makes it easy to rotate x-axis tick marks. Now there is an axis function called rotateLabels (degrees) that takes an integer and will rotate your xTick labels with a given number of degrees. To rotate all xTick tags 45 degrees back, you can use them as follows:

 var chart = nv.models.lineChart(); chart.xAxis.rotateLabels(-45);