如何隐藏n3图表中第一个孩子和最后一个孩子的刻度

Question

我使用n3-charts，它使用line-chart.min.js和d3.v2.js插件。我想隐藏x轴，第0个滴答值和最后一个子滴答值。下图中的操作方法。

​

好心的，有人帮我解决这个问题，我不想要的APR11和最后一个滴答值，这将动态变化。

app.directive('barChart', [
                       function () {

                           return {
                               restrict: 'EA',
                               template: '<linechart data="data" options="options" width="550" height="291"></linechart>',
                               scope: {
                                   range: '=',
                               },
                               link: function(scope, elements, attrs){
                                   scope.$watch("range", function () { 
                                   var values = scope.range;
                                   scope.data = values;
                                       scope.options = {
                                           yaxis  : {name: "Calories",labelalign:"-135"},
                                           stacks: [{axis: "y", series: ["firstVal", "secondVal", 'thirdVal']}],
                                           fonts:  {family: 'serif', size: '14px'},
                                           axes: {
                                               x: {key: 'x', type: 'date',labelFunction: function(x) { return d3.time.format('%b %d')(new Date(x));}},
                                               y: {key :'y',type: 'linear',min:0}
                                           },
                                           transition: {ease: 'elastic', duration: 1000, delay: 100},
                                           series: [
                                               {id: 'secondVal', y: 'secondVal', axis: 'y', color: "#b3d660", type: 'column', drawDots: true, dotSize: 4, label: 'Labe1'},
                                               {id: 'firstVal', y: 'firstVal', axis: 'y', color: "#ff8669", thickness: '2px', type: 'column', label: 'Label2'},
                                               {id: 'thirdVal', y: 'thirdVal', axis: 'y', color: "#52c4dc", type: 'column', dotSize: 2, label: 'Label3'}
                                           ],
                                           lineMode: 'linear',
                                           tension: 0.2,
                                           tooltip: {
                                               mode: 'scrubber', formatter: function (x, y, series) {
                                                   return series.label + ', ' + Math.round(y);
                                               }
                                           },
                                           drawLegend: true,
                                           drawDots: true,
                                           columnsHGap: 5
                                       }
                                   });
                               }

                           };}]);

Answer 1

对于n3- v2，您可以为每个轴定义一个tickFormat函数。

将一个名为tickFormat的函数添加到called e.options.axes.x，如下所示：

tickFormat: function(value, index){
    var firstOrLast = (index === 0) || (index === scope.values.length-1);
    return firstOrLast ? "" : value;
}

不确定n3-charts的作用域，但我看到在v1中已经有一个名为labelFunction的函数。你可以做一些类似上面代码的事情，但是你只需要检查你的参数'x‘是否匹配你在scope.values中的第一个或最后一个值。