小编Mik*_*lus的帖子

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

在nvd3网站上有一个带有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).我该如何展示这些价值观？我试图复制粘贴其他示例中使用的方法,其中显示了这些值,但它不起作用.任何的想法？ …