Skip to content

Chart Zoom and Default Topology

Created by: egaoneko

  • Chart Zoom
chart(display, {
            padding: {
                left: 60
            },
            height: 400,
            axis: [{
                data: statistics,
                x: {
                    type: "block",
                    domain: "date"
                },
                y: {
                    type: "range",
                    domain: [0, post_max_cnt],
                    step: 4,
                    line: true
                },
                area: {
                    width: "100%",
                    height: "100%"
                }
            }, {
                x: {
                    hide: true
                },
                y: {
                    domain: [0, comment_max_cnt],
                    orient: "right"
                },
                area: {
                    width: "100%",
                    height: "100%"
                },
                extend: 0
            }],
            brush: [{
                type: "column",
                target: "posts",
                axis: 0,
                colors: [0],
                animate: true
            }, {
                type: "line",
                target: "comments",
                axis: 1,
                colors: [2],
                animate: true
            }, {
                type: "scatter",
                target: "comments",
                size: 10,
                axis: 1,
                colors: [2]
            }],
            widget: [{
                type: "title",
                text: capitalizeFirstLetter(method) + " Overview",
                align: "start"
            }, {
                type: "title",
                text: "Counts",
                align: "start",
                orient: "center",
                dx: -55,
                dy: -90
            }, {
                type: "tooltip",
                format: function (k, v) {
                    return v;
                },
                brush: [0, 2, 3, 4]
            }, {
                type : "zoom",
            }],
            style: {
                scatterBorderWidth: 1.5,
                titleFontSize: "11px",
                titleFontWeight: "bold"
            },
            format: function (v) {
                if (typeof(v) == "number") {
                    return ((v > 1000) ? Math.floor(v / 1000) + "k" : v);
                }
                return v;
            }
        });

다음과 같이 차트에서 zoom을 사용하려고 합니다. 줌은 예상대로 확대가 되는데, 확대되는 zoom이 두개나 생성되네요.

            brush: [{
                type: "column",
                target: "posts",
                axis: 0,
                colors: [0],
                animate: true
            }, {
                type: "line",
                target: "comments",
                axis: 1,
                colors: [2],
                animate: true
            }, {
                type: "scatter",
                target: "comments",
                size: 10,
                axis: 1,
                colors: [2]
            }],

현재 zoom이 되는 모습이 posts 한번, comments 한번 해서 두번 zoom을 하는 것 같습니다. 이를 posts에서만 zoom하는 방법이 있나요?

  • Topology

topology를 생성할 때 한 노드를 선택되게 하거나 혹은 생성 후에 특정 노드를 선택할 방법이 있나요?

마지막으로 topology의 이벤트 생성시 nodeclick이나 edgeclick은 sample을 바탕으로 하면 잘 동작합니다. sample에 없는 click이나 dbclick 같은 이벤트를 사용하고 싶은데, 정의해도 동작을 하지 않습니다.

                click: function (data, e) {
                    console.log("nodeclick ---------------------");
                    console.log(data);
                }

                'click': function (data, e) {
                    console.log("nodeclick ---------------------");
                    console.log(data);
                }

                'topology.click': function (data, e) {
                    console.log("nodeclick ---------------------");
                    console.log(data);
                }

상단과 같이 세가지 다 사용해봤는데, 작동하지를 않습니다.