d3js畫ssh log圓餅圖

說明

d3js v5版本

這裡結合使用上一篇輸出的JSON Data來實作，進一步的網頁呈現

所以一共會有兩個資料來源

output_Fasle.json ：ssh登陸失敗的json檔
output_Success.json ：ssh登陸成功的json檔

資料格式

    {
        "false":[        
              {
                    "IP_Address" : "218.92.0.144",
                    "times" : 3864,
                    "status" : "false"
                },
              {
                    "IP_Address" : "59.36.144.188",
                    "times" : 1092,
                    "status" : "false"
                },        
              {
                    "IP_Address" : "218.92.0.156",
                    "times" : 955,
                    "status" : "false"
                },        
              {
                    "IP_Address" : "222.186.52.123",
                    "times" : 200,
                    "status" : "false"
                }
            ]
    }

index.html程式碼

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="css/main.css">
        </head>
        <body>
            <h1>D3js Circle</h1>
            <div class="box">
                <h2 id="fasle_title"></h2>
                <div id="fasle_circle"></div>
            </div>
            <div class="box">
                <h2 id="success_title"></h2>
                <div id="success_circle"></div>
            </div>
        </body>
        <script src="js/jquery.js"></script>
        <script src="js/d3.min.js"></script>
        <script src="js/main.js"></script>
    </html>

畫圓形圖也是利用path來畫的，不過多了半徑的相關觀念而以

核心說明

d3.pie() 能夠幫你計算，每個資料startAngle及endAngle
d3.arc() 設定圓的內徑及外徑

d3.pie() 範例：

    const pie_data = d3.pie()(data.false.map(function(d) {return d.times;}));
    console.log(pie_data);

輸出結果：

    data: 1092
    endAngle: 4.321324782456568
    index: 1
    padAngle: 0
    startAngle: 3.369168474457663
    value: 1092

main.js程式碼

    ////////////登陸失敗的
    const width = 500, height =500, radius = 150;
    const arc = d3.arc().outerRadius(radius - 10).innerRadius(0);
    const labelArc = d3.arc().outerRadius(radius+20).innerRadius(radius);
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "data/output_Fasle.json",
            data: "data",
            async: false,
            dataType: "json",
            success: function (response) {
                const data = Object.assign({}, response);
                const pie_data = d3.pie()(data.false.map(function(d) {return d.times;}));
                const svg = d3.select("#fasle_circle")   
                    .append("svg")
                    .attr("width", width)   
                    .attr("height", height);   

                const g = svg.selectAll(".arc")
                    .data(pie_data)
                    .enter().append("g")
                    .attr('transform','translate(200,200)')
                    .attr("class", "arc");

                const color = d3.scaleOrdinal().range(d3.schemeSet3);

                g.append("path")
                    .attr("d", arc)
                    .style("fill", function(d) {
                        return color(d.data); 
                    });

                g.append("text")
                .attr("transform", function(d) {return "translate(" + labelArc.centroid(d) + ")";})
                .attr("text-anchor", "middle") 
                .text(function(d) { 
                    return d.data; 
                });

                $("#fasle_title").html("SSH登錄失敗IP次數");
            }
        });

    //////////////////////成功的

        $.ajax({
            type: "GET",
            url: "data/output_Success.json",
            async: false,
            data: "data",
            dataType: "json",
            success: function (response) {
                const data = Object.assign({}, response);
                const pie_data = d3.pie()(data.true.map(function(d) {return d.times;}));


                const svg = d3.select("#fasle_circle")   
                    .append("svg")
                    .attr("width", width)   
                    .attr("height", height);   

                const g = svg.selectAll(".arc")
                    .data(pie_data)
                    .enter().append("g")
                    .attr('transform','translate(200,200)')
                    .attr("class", "arc");

                const color = d3.scaleOrdinal().range(d3.schemeSet3);

                g.append("path")
                    .attr("d", arc)
                    .style("fill", function(d) {
                        return color(d.data); 
                    });

                g.append("text")
                .attr("transform", function(d) {return "translate(" + labelArc.centroid(d) + ")";})
                .attr("text-anchor", "middle") 
                .text(function(d) { 
                    return d.data; 
                });

                $("#success_title").html("SSH登錄成功IP次數");
            }
        });
    });