如何从 D3.js 图表中读取（获取）Y 轴比例值？答案

【问题标题】：How to read(get) Y-Axis Scale Values from D3.js Chart?如何从 D3.js 图表中读取（获取）Y 轴比例值？
【发布时间】：2018-05-15 00:55:15
【问题描述】：

有什么方法可以从 D3.js 图表中获取 Y 轴刻度值。我有以下图表，我想通过单击按钮来获取 Y 轴刻度。

我想读取红框内 X 轴上的刻度。我已使用以下代码创建 D3 图表。

任何获得价值的想法或意见都将受到高度赞赏。

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>

【问题讨论】：

也许特定于一个自定义 Y 轴格式化程序，它只是将默认刻度值传递出去，但也将其推入一个数组以供以后使用？ api.highcharts.com/highcharts/yAxis.labels.formatter

标签： javascript angularjs d3.js nvd3.js

【解决方案1】：

您可以使用 d3.selectAll 选择刻度，并在每个刻度上进行迭代以访问附加的数据值，例如，以下将起作用，并且需要更新以确保您在 nvd3 中选择正确的元素类

let yValues = []

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

console.log(yValues)

【讨论】：

谢谢你的想法..但它没有显示值..也许我输入了错误的类。你能用我在代码中提到的类名更新上面的代码吗？
在您上面发布的代码 sn-p 中，y 轴包含在带有“nv-y nv-wrap nvd3-svg”类的 ag 元素中，其中有带有类“滴答”。我会使用“.nv-y”和“.tick”来选择你的元素。我已经更新了答案