Question

我是这类论坛的新手，我的英语技能不是最好的，但我会努力做到最好:)。

在nvd3 website处有一个带有View Finder的折线图示例。这是我在过去2天内一直在使用的那个（例子\ lineWithFocusChart.html，nvd3 zip包）。我只对示例的格式进行了一处更改：我使用X轴中的日期而不是正常数字。

以下是我的两个问题：

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。

Answer 1

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

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

nvd3.js-带有View Finder的折线图：旋转轴标签并在鼠标悬停时显示线条值

1 个答案: