javascript nvd3.js-Line Chart with View Finder：旋转轴标签并在鼠标悬停时显示线值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11532971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over
提问by Mike Molus
I'm new to this kind of forum and my English skills are not the best but I'll try to do my best :).
我是这种论坛的新手，我的英语水平不是最好的，但我会尽力做到最好:)。
There is an example of a Line Chart with View Finder at nvd3 website. This is the one (examples\lineWithFocusChart.html, nvd3 zip package) which I have been working with during the last 2 days. I have made only one change to the example's format: I use dates in the X axis instead of normal numbers.
在nvd3 网站上有一个带有 View Finder 的折线图示例。这是我在过去 2 天内一直在使用的一个（examples\lineWithFocusChart.html，nvd3 zip 包）。我只对示例的格式进行了一项更改：我在 X 轴上使用日期而不是普通数字。
Here are my 2 questions:
这是我的2个问题：
1- How can i rotate all the ticks' labels in the x axis? My dates are too long (%x %X, day and time) and I want them rotated in oder to improve their viewing. I can only get 2 ticks rotated (the max and min, the edges, of the x axis). This is the code I modify inside the "switch (axis.orient())" block at nv.d3.js:
1- 如何在 x 轴上旋转所有刻度的标签？我的日期太长（%x %X，日期和时间），我希望它们按顺序旋转以改善观看效果。我只能旋转 2 个刻度（x 轴的最大值和最小值，边缘）。这是我在 nv.d3.js 的“switch (axis.orient())”块中修改的代码：
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 have placed .attr('transform', 'rotate(45)') as new attribute so the max and min ticks are rotated (axisMaxMin). I have tried this way (throughout the nv.d3.js file) with the other text elements that I think are associated with the x ticks but it doesnt work. Any idea? Where I have to put the transformation in order to show all the X labels rotated?
如您所见，我已将 .attr('transform', 'rotate(45)') 作为新属性放置，以便最大和最小刻度旋转（axisMaxMin）。我已经尝试过这种方式（在整个 nv.d3.js 文件中）以及我认为与 x 刻度关联的其他文本元素，但它不起作用。任何的想法？我必须把转换放在哪里才能显示所有旋转的 X 标签？
2- In the example, when you place the mouse over the line, no event is triggered to show the value (x,y) associated with the point. How can i show those values? I've tried to copy-paste the methods used in other examples where these values are showed but it doesnt work. Any idea?
2- 在示例中，当您将鼠标放在线上时，不会触发任何事件来显示与该点关联的值 (x,y)。我怎样才能显示这些值？我试图复制粘贴其他示例中使用的方法，其中显示了这些值，但它不起作用。任何的想法？
Thanks for sharing your time and knowledge :D.
感谢您分享您的时间和知识：D。
回答by EricRose
There was a recent update to nvd3 that makes rotating the x-axis tick labels really easy. There is now a function of the axis model called rotateLabels(degrees) that takes an integer and will rotate your xTick labels the specified number of degrees. To rotate all xTick labels 45 degrees back, you could use it like this:
最近对 nvd3 进行了更新，使旋转 x 轴刻度标签变得非常容易。现在有一个名为 rotateLabels(degrees) 的轴模型函数，它接受一个整数，并将您的 xTick 标签旋转指定的度数。要将所有 xTick 标签向后旋转 45 度，您可以像这样使用它：
var chart = nv.models.lineChart();
chart.xAxis.rotateLabels(-45);
