javascript - 如何隐藏 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-charts v2，您可以为每个轴定义一个tickFormat函数。

向scope.options.axes.x添加一个名为tickFormat的函数，其内容如下:

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

不确定 n3-charts v1，但我发现您在scope.options.axes.x 中已经有一个名为 labelFunction 的函数。您可以执行与上述代码类似的操作，但只需检查参数“x”是否与scope.values 中的第一个或最后一个值匹配。