D3로 Gantt 차트 만들기

TextGantt 이라는 텍스트 → Gantt 차트 변환 도구를 만들고 있습니다.



하지만 Gantt 차트 그리기를 jQuery plugin에 의존하고 있으며, 여러 가지 자유롭지 않습니다.
모처럼이므로, SVG등으로 자전으로 그리도록 하고 싶은 곳입니다.

그래서 이번에는 D3의 연습으로 간이 간트 차트를 그려 보았습니다. 앞으로는 드로잉 부분은 D3에서 다시 작성하고 싶습니다.

아티팩트

몹시 심플(다사이)군요・・・

그러나

도움이 될지 모르겠지만 코드는 다음에서 얻을 수 있습니다.

github

포인트

휠 터치 스크린 지원 줌

일단 일본어화

수수한 외형(아마 직장에서 사용할 수 있을 것···)

코드 일부 해설

요일 표시를 일본어로 설정

    //曜日表示を日本語に設定
    var ja_JP = d3.locale({
        "decimal": ".",
        "thousands": ",",
        "grouping": [3],
        "currency": ["", "円"],
        "dateTime": "%a %b %e %X %Y",
        "date": "%Y/%m/%d",
        "time": "%H:%M:%S",
        "periods": ["AM", "PM"],
        "days": ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
        "shortDays": ["日", "月", "火", "水", "木", "金", "土"],
        "months": ["01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月"],
        "shortMonths": ["01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月"]
    });

    //X軸表示設定
    var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .ticks(d3.time.day, 1)
            .tickSize(-height)
            .tickFormat(ja_JP.timeFormat("%d%a"));

d3.locale을 이용하여 날짜가 일본어로 표시되도록 했습니다.

덧붙여서, locale는 모든 것을 정의하지 않으면 그래프가 표시되지 않습니다.
사용하는 것만을 차분 정의하고 싶은 곳입니다.

작업 이름의 오른쪽 정렬

        //タスクのラベル表示
        text.text(function (item) {
            return item.name
        })
        .attr("text-anchor", "end")
        .attr("x", function (item) {
            return xScale(item.start) - 10
        })
        .attr("y", function (item, i) {
            return i * 40 + 28
        });

text-anchor를 사용하면 텍스트의 원점을 어디에 가져갈지 지정할 수 있습니다 (SVG 기능). 여기에 end를 지정하면 오른쪽 정렬이 됩니다.

줌 기능

    var update = function () {
        //ズーム
        svg.select(".x.axis").call(xAxis);

        //タスク表示
        rect.attr("x", function (item) {
            return xScale(item.start);
        }).attr("y", function (item, i) {
            return i * 40 + 20
        }).attr("width", function (item) {
            return xScale(item.end) - xScale(item.start)
        }).attr("height", 10);

    };

이 코드는 on("zoom")에서 실행 중입니다. 줌 실행 후 축을 재평가하고 태스크 표시 좌표를 재평가합니다.

또한 svg 요소를 append 한 후이 update를 호출하여 초기 표시를 할 수 있습니다 (불리지 않으면 새하얀).

또, 잊기 쉬운 것이, 핀치 인 아웃의 당 판정으로서, 배경에 rect를 깔아 두는 것입니다. 이것이 없으면 핀치 인 아웃을 데리지 않습니다.

    //ズーム当たり判定
    svg.append("rect")
            .attr("width", width)
            .attr("height", height);

D3 사용해 본 소감

D3의 줌 최강

D3 자체는 다루지 않지만 D3의 줌 기능은 자주 사용하고 있습니다. 터치 스크롤로부터 핀치 인·핀치 아웃에 의한 확대 축소, 마우스 휠 대응 등, 아무것도 의식하지 않아도 모두에 대응할 수 있습니다.

특히 스마트폰 사이트를 구축할 때 제스처에 의한 의사적인 터치 대응이 아니라 널 널과 터치에 반응해 주었을 때 d3의 터치 기능을 사용할 수 있습니다.

메소드 체인에서 어떤 객체가 돌아 왔는지 지금은 알 수 없습니다.

아직도 잘 모르겠습니다. 대책으로서, TypeScript에서 d.ts의 도움을 받으면서 짜고 있었던 적이 있었습니다.
좀 더 익숙하지 않으면군요・・・.

참고로 한 사이트