angular + d3 tickFormat使用y的字符串值

时间:2013-07-22 14:24:23

标签: javascript angularjs d3.js nvd3.js

我有以下图表配置:

nv.addGraph(function() {
    var chart = nv.models.cumulativeLineChart()
        .x(function(d) { return d.x.getTime() })
        .y(function(d) { return d.y })
        .color(d3.scale.category10().range());

    chart.xAxis
        .axisLabel('Período')
        .tickFormat(function(d) {
            return d3.time.format("%m/%y")(new Date(d));
        });

    chart.yAxis
        .axisLabel('Rentabilidade')
        .tickFormat(function(d) {
            return (d * 100).toFixed(2) + '%';
        });

    d3.select('#profitability-chart')
        .datum(data)
        .transition().duration(500)
            .call(chart);

    return chart;
});

问题是图表中的每个最后一点都显示了不同的格式化y值。例如:

  图表上的

行“Foo”:

     
      
  • 最后一点显示“36%”
  •   
  • 检查data数组,      
        
    • y = 1.7205607426554128
    •   
    • display.y = 0.3602803713277064
    •   
  •   

Here是一个数据样本。

我不知道 display.y 的来源,以及如何计算此值。我认为d3.format正在改变真正的价值,所以我已经切换到手动tickFormat,但问题仍然存在。

PS:我也在使用angular.js。

1 个答案:

答案 0 :(得分:0)

Lars Kotthoff在评论中回答。基本上,我用这种方式构建我的数据:

{
    "key": "Fund 1",
    "values": [
        {
            "x": "1999-11-05T02:00:00.000Z",
            "y": 1
        },
        {
            "x": "1999-11-13T02:00:00.000Z",
            "y": 1.00342088549313
        },
        ...
    ]
}

基本上,我的y值是实际百分比,除以第一个值(第一个值为1的原因)。

真正应该做的是给图表提供绝对值,例如:

{
    "key": "Fund 1",
    "values": [
        {
            "x": "1999-11-05T02:00:00.000Z",
            "y": 120045.21
        },
        {
            "x": "1999-11-13T02:00:00.000Z",
            "y": 32521.01
        },
        ...
    ]
}

NVD3将计算所有百分比。