Nvd3.js-带View Finder的折线图:当鼠标悬停在上方时，旋转轴标签并显示线值
我是第一次参加这样的论坛，我的英语水平不是最好的，但我会尽力做到最好:)。
在nvd3 website上有一个带有View Finder的折线图的例子。这是一个(examples\lineWithFocusChart.html，nvd3压缩包)，我在过去的两天里一直在使用它。我只对示例的格式进行了一次更改:我在X轴上使用日期，而不是普通数字。
以下是我的两个问题：
1-如何在x轴上旋转所有刻度的标签？我的日期太长(%x%X，日期和时间)，我希望轮换它们以改善查看效果。我只能旋转两个刻度(最大值和最小值，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;正如你可以检查的那样，我已经将.attr('transform'，'rotate(45)')作为新属性放置，因此最大和最小刻度被旋转(axisMaxMin)。我已经尝试了这种方法(在整个nv.d3.js文件中)，对于我认为与x记号相关联的其他文本元素，但它不起作用。有什么想法吗？为了显示所有旋转的X标签，我必须将变换放在哪里？
2-在示例中，当您将鼠标放在线上时，不会触发任何事件来显示与该点关联的值(x，y)。如何显示这些值？我尝试复制-粘贴在其他示例中使用的方法，其中显示了这些值，但它不起作用。有什么想法吗？
感谢分享您的时间和知识:D。
回答 1
Stack Overflow用户
发布于 2012-08-03 22:16:07
最近对nvd3进行了更新，使得旋转x轴刻度标签变得非常容易。现在，轴模型有一个名为rotateLabels(度)的函数，它接受一个整数，并将xTick标签旋转指定的度数。要将所有xTick标签向后旋转45度，您可以像这样使用它：
var chart = nv.models.lineChart();
chart.xAxis.rotateLabels(-45);https://stackoverflow.com/questions/11532971
复制
腾讯云开发者
