7

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

在nvd3 网站上有一个带有 View Finder 的折线图示例。这是我在过去 2 天内一直在使用的一个（examples\lineWithFocusChart.html，nvd3 zip 包）。我只对示例的格式进行了一项更改：我在 X 轴上使用日期而不是普通数字。

这是我的2个问题：

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;

如您所见，我已将 .attr('transform', 'rotate(45)') 作为新属性放置，因此旋转了最大和最小刻度（axisMaxMin）。我已经尝试过这种方式（在整个 nv.d3.js 文件中）以及我认为与 x 刻度相关的其他文本元素，但它不起作用。任何想法？为了显示旋转的所有 X 标签，我必须将转换放在哪里？

2- 在示例中，当您将鼠标放在线条上时，不会触发任何事件来显示与该点关联的值 (x,y)。我怎样才能显示这些值？我尝试复制粘贴在显示这些值的其他示例中使用的方法，但它不起作用。任何想法？

感谢您分享您的时间和知识：D。

4

1 回答 1

32

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

var chart = nv.models.lineChart();
chart.xAxis.rotateLabels(-45);
于 2012-08-03T22:16:07.073 回答