x軸のラベルに改行を入れたい

まぁそんなこともあるってことで。

元データがyyyyMMddHHmmssみたいなデータでこれを…

MM/dd
HH:mm

みたいにラベルに表示したいってときです。ぐぐったらstackoverflowに答えが。もとのラベル決して、tspanでテキスト区切って座標の調整が必要みたいです。

• javascript - How do I include newlines in labels in D3 charts? - Stack Overflow

ということで、TypeScriptのプロジェクト作ってd3をNuGetで入れて以下のコードをapp.tsに追加して実行！

/// <reference path="scripts/typings/d3/d3.d.ts" />
class Data {
    constructor(public date: string, public value: number) { }
}

window.onload = () => {
    var layout = {
        width: 500,
        height: 500,
        padding: 50,
    };

    var org = d3.range(0, 10, 1).map(v => new Data("200010011010", 0 | Math.random() * 100));
    var data = org.map((d, i) => { return { id: i, data: d } });

    var xScale = d3.scale.linear().domain([0, 9]).range([layout.padding, 500]);
    var yScale = d3.scale.linear().domain([0, 100]).range([layout.height, layout.padding]);

    var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
    var yAxis = d3.svg.axis().scale(yScale).orient("left");

    var svg = d3.select("#content")
        .append("svg")
        .attr("width", layout.width)
        .attr("height", layout.height);

    // 軸を作成
    svg.append("g")
        .attr("class", "axis x")
        .call(xAxis)
        .attr("transform", "translate(0, " + layout.width + ")");
    svg.append("g")
        .attr("class", "axis")
        .call(yAxis)
        .attr("transform", "translate(" + layout.padding + ", 0)");

    // 点をうつ
    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", d => xScale(d.id))
        .attr("cy", d => yScale(d.data.value))
        .attr("fill", "steelblue")
        .attr("r", 3);

    // ここから下が今回のポイント
    // 全てのx軸のテキストに対して処理をする
    svg.selectAll("g.axis.x text")
        // thisが現在の要素なのでfunctionにする
        .each(function (v, index) {
            var textElement = d3.select(this);
            // データからもとになるテキストを取得してばらす
            var str = data[index].data.date;
            var month = str.substr(4, 2);
            var day = str.substr(6, 2);
            var hour = str.substr(8, 2);
            var min = str.substr(10, 2);
            // 一行目のデータ
            var dateText = month + "/" + day;
            // 二行目のデータ
            var timeText = hour + ":" + min;

            // 元のテキストを削除して
            textElement.text("");
            // 一行目のデータを追加して
            textElement.append("tspan").text(dateText);
            // 二行目のデータを追加する。位置は微調整が必要
            textElement.append("tspan")
                .attr("x", 0)
                .attr("dy", 10)
                .text(timeText);
        });
};

実行すると、X軸のラベル改行されてる。ふむ。もうちょい楽にやりたいね…。