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

【问题标题】：angular + d3 tickFormat using a string value for yangular + d3 tickFormat 使用 y 的字符串值
【发布时间】：2013-07-22 14:24:22
【问题描述】：

我有以下图表配置：

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。

【问题讨论】：

你能告诉我们完整的代码和数据吗？
@LarsKotthoff，样本是here。我不知道我是否需要发布生成该数据的函数，我仔细检查了它，它很好。调试帖子上的 sn-p 值 display.y 仅在 d3.select(...).datum(...) 之后创建。
display.y 由 NVD3 计算得出。我不完全是你想要达到的目标。您只想为 y 轴标签显示 2 位小数吗？
@LarsKotthoff，我需要图表在图表轴和工具提示上都显示“172%”，但这不是现在发生的情况。相反，它显示“36%”。我怎样才能改变它？
您需要使用不同类型的 NVD3 图表。累积折线图就是这样 - 它显示总数的百分比，即它期望数字是绝对值。

标签： javascript angularjs d3.js nvd3.js

【解决方案1】：

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 将计算所有百分比。

【讨论】：