angular + d3 tickFormat using a string value for y

问题

I have the following chart config:

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;
});

The problem is that every last point in chart shows a different formatted y value. For example:

line "Foo" on chart:

• last point shows "36%"
• Inspecting the data array,
  • y = 1.7205607426554128
  • display.y = 0.3602803713277064

Here's a sample of the data.

I don't know where this display.y comes from, and how this value is computed. I thought d3.format was changing the real value, so I've switched to a manual tickFormat, but the problem still exists.

PS.: I'm also using angular.js.

回答1:

Lars Kotthoff answered in a comment. Basically, I was build my data this way:

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

Basically, my y values were actual percentages, calculated dividing by the first value (that's why the first value is 1).

What should really be done is give absolute values to the chart, like:

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

And NVD3 will compute all percentages.

来源：https://stackoverflow.com/questions/17790062/angular-d3-tickformat-using-a-string-value-for-y