2017-04-22 1 views
0

Ich benutze Anuglar-Nvd3 und kann keine Dokumentation über die API finden. Das Problem, mit dem ich gerade konfrontiert bin, ist, wie kann ich einen maximalen Wert von & auf den xAxis und yAxis setzen.Einstellen eines Min & Max auf der Achse

Mit anderen Worten, unabhängig von den Daten würde die Achse ein Minimum von -1 haben und maximal 1.

Plunker: http://plnkr.co/edit/LKt3UJe5PnJOf8uQEwxr?p=preview

Code:

var app = angular.module('plunker', ['nvd3']); 

app.controller('MainCtrl', function($scope) { 
$scope.options = { 
      chart: { 
       type: 'scatterChart', 
       height: 450, 
       color: d3.scale.category10().range(), 
       scatter: { 
        onlyCircles: false 
       }, 
       showDistX: true, 
       showDistY: true, 
       tooltipContent: function(key) { 
        return '<h3>' + key + '</h3>'; 
       }, 
       duration: 350, 
       xAxis: { 
        scale: [0,5], 
        axisLabel: 'X Axis', 
        tickFormat: function(d){ 
         return d3.format('.02f')(d); 
        } 
       }, 
       yAxis: { 
        axisLabel: 'Y Axis', 
        tickFormat: function(d){ 
         return d3.format('.02f')(d); 
        }, 
        axisLabelDistance: -5 
       }, 
       zoom: { 
        //NOTE: All attributes below are optional 
        enabled: false, 
        scaleExtent: [1, 10], 
        useFixedDomain: false, 
        useNiceScale: false, 
        horizontalOff: false, 
        verticalOff: false, 
        unzoomEventType: 'dblclick.zoom' 
       }, 
       margin: { 
        top: 100, 
        right: 100, 
        left: 100, 
        bottom: 100 
       } 
      } 
     }; 

     $scope.data = [ 
     { 
      "key":"static", 
      "color":"#fff", 
      "values":[ 
      { 
       "x":-1, 
       "y":-1, 
       "size":0.0000001, 
       "shape":"circle", 
       "series":0 
      }, 
      { 
       "x":1, 
       "y":1, 
       "size":0.0000001, 
       "shape":"circle", 
       "series":0 
      } 
      ] 
     }, 
     { 
      "key":"Group 0", 
      "color":"#1f77b4", 
      "values":[ 
      { 
       "x":-0.5, 
       "y":-0.5, 
       "size":0.5, 
       "shape":"circle", 
       "series":0 
      } 
      ] 
     }, 
     { 
      "key":"Group 1", 
      "color":"#ff7f0e", 
      "values":[ 
      { 
       "x":-0.5, 
       "y":0.5, 
       "size":0.5, 
       "shape":"circle", 
       "series":0 
      } 
      ] 
     }, 
     { 
      "key":"Group 2", 
      "color":"#2ca02c", 
      "values":[ 
      { 
       "x":0.5, 
       "y":-0.5, 
       "size":0.5, 
       "shape":"circle", 
       "series":0 
      } 
      ] 
     }, 
     { 
      "key":"Group 3", 
      "color":"#d62728", 
      "values":[ 
      { 
       "x":0.5, 
       "y":0.5, 
       "size":0.5, 
       "shape":"circle", 
       "series":0 
      } 
      ] 
     } 
    ]; 

}); 

Antwort

0

Haben Sie versucht,

forceY: [-1, 1], 
forceX: [-1, 1], 
+0

Das hat Danke funktioniert. Gibt es Online-Dokumentationen, denen ich folgen kann? –

+0

Schauen Sie sich die NVD3-Dokumentation an. https://nvd3-community.github.io/nvd3/examples/documentation.html Angular NVD3 verwandelt die Funktionsaufrufe in Konfigurationsoptionen. – jeznag