我是这种论坛的新手，我的英语水平不是最好的，但我会尽力而为:)。

在 nvd3 website 处有一个带取景器的折线图示例.这是我过去 2 天一直在使用的那个(examples\lineWithFocusChart.html，nvd3 zip 包)。我只对示例的格式做了一处更改:我在 X 轴上使用日期而不是普通数字。

这是我的两个问题:

1- 我怎样才能在 x 轴上旋转所有刻度的标签？我的日期太长(%x %X，日期和时间)，我希望它们按顺序轮换以提高观看效果。我只能旋转 2 个刻度(x 轴的最大和最小边缘)。这是我在 nv.d3.js 的“switch (axis.orient())” block 中修改的代码:

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。

最佳答案

最近对 nvd3 进行了更新，这使得旋转 x 轴刻度标签变得非常容易。现在有一个名为 rotateLabels(degrees) 的轴模型函数，它接受一个整数并将您的 xTick 标签旋转指定的度数。要将所有 xTick 标签向后旋转 45 度，您可以这样使用它:

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

关于javascript - nvd3.js-带取景器的折线图 : rotate axis labels and show line values when mouse over，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11532971/