D3.js 차트에서 Y 축 스케일 값을 읽는 방법 (가져 오기)?

D3.js 차트에서 Y 축 스케일 값을 가져 오는 방법이 있습니까? 다음 차트가 있으며 단추를 클릭하여 Y 축 배율을 가져 오려고합니다.D3.js 차트에서 Y 축 스케일 값을 읽는 방법 (가져 오기)?

빨간 상자 안에있는 X 축의 눈금을 읽고 싶습니다. 아래 코드를 사용하여 D3 차트를 만들었습니다.

값을 얻으려는 아이디어 나 의견은 높이 평가 될 것입니다.

enter image description here

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.options = { 
 
      chart: { 
 
       type: 'discreteBarChart', 
 
       height: 450, 
 
       margin : { 
 
        top: 20, 
 
        right: 20, 
 
        bottom: 50, 
 
        left: 55 
 
       }, 
 
       x: function(d){return d.label;}, 
 
       y: function(d){return d.value + (1e-10);}, 
 
       showValues: true, 
 
       valueFormat: function(d){ 
 
        return d3.format(',.4f')(d); 
 
       }, 
 
       duration: 500, 
 
       xAxis: { 
 
        axisLabel: 'X Axis' 
 
       }, 
 
       yAxis: { 
 
        axisLabel: 'Y Axis', 
 
        axisLabelDistance: -10 
 
       } 
 
      } 
 
     }; 
 

 
     $scope.data = [ 
 
      { 
 
       key: "Cumulative Return", 
 
       values: [ 
 
        { 
 
         "label" : "A" , 
 
         "value" : 25 
 
        } , 
 
        { 
 
         "label" : "B" , 
 
         "value" : 17 
 
        } , 
 
        { 
 
         "label" : "C" , 
 
         "value" : 32 
 
        } , 
 
        { 
 
         "label" : "D" , 
 
         "value" : 41 
 
        } , 
 
        { 
 
         "label" : "E" , 
 
         "value" : 52 
 
        } , 
 
        { 
 
         "label" : "F" , 
 
         "value" : 46 
 
        } , 
 
        { 
 
         "label" : "G" , 
 
         "value" : 31 
 
        } , 
 
        { 
 
         "label" : "H" , 
 
         "value" : 36 
 
        } 
 
       ] 
 
      } 
 
     ] 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>Angular-nvD3 Discrete Bar Chart</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    
 
    <nvd3 options="options" data="data"></nvd3> 
 
    
 
    <br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a> 
 
    </body> 
 

 
</html>

출처

2017-11-30 Whiz Blogger

아마도 특정 맞춤 Y 축 기본 틱 값을 전달하지만 나중에 사용할 수 있도록 배열로 푸시하는 포맷터? https://api.highcharts.com/highcharts/yAxis.labels.formatter – John

당신은 d3.selectAll를 사용하여 진드기를 선택하고 예를 들어, 추가 데이터 값에 액세스하는 각 반복 수, 다음이 작동 것이며, 필요 업데이트하여 nvd3에서 올바른 요소 클래스를 선택하도록하십시오.

let yValues = [] 

d3.select(".nv-y").selectAll(".tick") 
    .each(function(d){ 
     yValues.push(d) 
    }) 

console.log(yValues)

출처

2017-12-01 01:28:11

아이디어를 주셔서 감사합니다. 그러나 값을 표시하지 않습니다. 틀린 클래스를 입력했을 수 있습니다. 위의 코드를 클래스 이름으로 업데이트 할 수 있습니까? 코드에서 언급 했습니까? –

위에 게시 한 코드 스 니펫에서 y 축은 클래스 "nv-y nv-wrap nvd3-svg"가있는 g 요소 내에 포함되며 그 안에 클래스 "tick"이있는 눈금이 있습니다. ".nv-y"와 ".tick"을 사용하여 요소를 선택합니다. 내 대답을 업데이트했습니다. –

D3.js 차트에서 Y 축 스케일 값을 읽는 방법 (가져 오기)?

답변

관련 문제