tooltipに値の合算値を出したい

## 始まり
tooltip(グラフにオンマウスした時に表示されるやつ)に表示してあるグラフの合算値を出したい。
上記を実現する時、皆さんはどうしますか？
私はtooltipをカスタマイズして表示する方法へ行きつきました。

## 調べてみよう
そもそもカスタムできるのかなと思って[公式サイトのリファレンス](http://c3js.org/reference.html)を確認したところ、
`tooltip.contents`という項目に答えが書いてありました。
`Set custom HTML for the tooltip.`つまりHTMLを書けと。

リファレンスでは以下の様な形式で定義しろと記載していますが、情報が少なすぎて引数が何をしているか謎です。

```javascript
tooltip: {
  contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
    return ... // formatted html as you want
  }
}
```

## 見てみよう
なので、[ソースコード](https://github.com/masayuki0812/c3/blob/master/src/tooltip.js)を確認してデフォルトの状態を参考にします。

```javascript
c3_chart_internal_fn.getTooltipContent = function (d, defaultTitleFormat, defaultValueFormat, color) {
    var $$ = this, config = $$.config,
        titleFormat = config.tooltip_format_title || defaultTitleFormat,
        nameFormat = config.tooltip_format_name || function (name) { return name; },
        valueFormat = config.tooltip_format_value || defaultValueFormat,
        text, i, title, value, name, bgcolor;
    for (i = 0; i < d.length; i++) {
        if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }

        if (! text) {
            title = titleFormat ? titleFormat(d[i].x) : d[i].x;
            text = "<table class='" + CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
        }

        value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
        if (value !== undefined) {
            name = nameFormat(d[i].name, d[i].ratio, d[i].id, d[i].index);
            bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);

            text += "<tr class='" + CLASS.tooltipName + "-" + d[i].id + "'>";
            text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
            text += "<td class='value'>" + value + "</td>";
            text += "</tr>";
        }
    }
    return text + "</table>";
};
```

## 書いてみよう
デフォルトのままコピペだと、変数の定義がなかったりでエラーになるので、不要なコードを削ります。
そして合計値を出す処理を追加します。

```javascript
tooltip: {
    // tooltipの表示のカスタマイズ
    contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
        var $$ = this,
            titleFormat = defaultTitleFormat,
            nameFormat = function (name) {
                    return name;
                },
            valueFormat = defaultValueFormat,
            total = 0,
            text, i, title, value, name, bgcolor;
        for (i = 0; i < d.length; i++) {
            if (!(d[i] && (d[i].value || d[i].value === 0))) {
                continue;
            }
            if (!text) {
                title = titleFormat ? titleFormat(d[i].x) : d[i].x;
                text = "<table class='c3-tooltip c3-tooltip-container'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
            }
            name = nameFormat(d[i].name, d[i].ratio, d[i].id, d[i].index);
            value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
            bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);
            total += parseInt(value.split(",").join(""));
            text += "<tr class='" + d[i].id + "'>";
            text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
            text += "<td class='value'>" + value.toLocaleString() + "</td>";
            text += "</tr>";
        }
        text += "<tr><td class='name'>合計値</td>";
        return text + "<td class='total'>" + total.toLocaleString() + "</td></tr></table>";
    }
}
```

ちなみにこれだけだと、そもそもtooltipが出なくなります。
y軸のフォーマット指定しなければいけません。

```javascript
    axis : {
        y : {
            tick: {
                format: d3.format("d")
            }
        }
    },
```

## 出来ました

まだ不要なコードが残っているような気がしますが、これでtooltipで合計値が出る様になりました。