軟體開發(軟件開發)

網智數位主要提供套裝及客製化的軟體系統解決方案,專為客戶量身訂做客製化的軟體,達成客製化、智慧化及網路化的管理功能。

雲端VPS虛擬主機租用

我們的雲端VPS虛擬主機是採用雲端(虛擬化)技術所開發之全新雲端伺服器服務,可以選擇多種作業系統(Windows、Linux等),客戶可載入自訂的應用環境,執行自己所要提供的網路服務,我們的雲端服務可為您的網站提供最完美的解決方案。

搜尋引擎最佳化SEO

搜尋引擎最佳化(SEO)不僅能提高網站在搜尋結果的排名,更能帶來大量對我們產品或服務真正有需求的訪客。SEO 最棒的特質之一就是不像廣告一樣亂槍打鳥而導致用戶的反感,反而更能提升點閱率跟成交率喔。

服務宗旨

網智數位主要提供套裝及客製化的軟體系統解決方案,專為客戶量身訂做客製化的軟體,達成客製化、智慧化及網路化的管理功能。

我們的成立宗旨就是要以最猛的IT技術讓這個世界更Smart,在我們貫徹我們裡想的同時,我們希望可以把我們所開發的系統帶給台灣的中小企業,除了要推薦好的東西之外,我們也希望做點改變,所以我們的第一目標就是要使用最好用的系統再加上您寶貴的創意,不僅僅可以節省你大量的荷包,還可以有一個像樣的網站。我們可以幫你做的有

企業管理
  • 策略管理
  • 目標管理
  • 行銷管理
  • 財會管理
  • ERP導入
  • 企業流程自訂
資訊管理
  • 網站架設
  • 虛擬化/雲端架設
  • 主機代管
  • 私有雲建制與導入
軟體開發
  • UML設計
  • 版本控管
  • 企業軟體開發
  • APP開發
  • 網頁設計
資訊安全
  • 網頁弱點掃描
  • 主機弱點掃描
  • 木馬檢測
  • 資安鑑識
  • 設計網路架構
  • 資安監控
行銷
  • 關鍵字SEO
  • 社群網路行銷
  • 部落格行銷
  • FaceBook 粉絲團
其他
  • 協助企業申請Google Email
好玩工具開發

講出你的創意吧!沒有甚麼是資訊辦不到的

2017年12月4日 星期一

Java Script D3 資料過濾教學(軟體設計、軟體開發)

       我在網頁繪圖時,現在常使用 D3 來幫客戶做成統計視覺圖表,但一定會遇到客戶要求在使用者界面上可以進行某些條件的過濾篩選,例如根據勾選或者執行某個按鈕(Button)時,可以顯示或隱藏網頁部分元素圖表,而這樣需求條件,我們就可以利用 Java Script D3 支援的 Filter 函數來實作此需求案例。

案例執行畫面如下

2017-12-04_11-11-28

//完整程式碼如下:

<!DOCTYPE html>
< html>
< head>
    <meta charset="utf-8">
    <title>網智數位 Java Script D3 過濾資料技巧</title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <script type="text/javascript" src="d3.js"></script>
< /head>

<body>

<script type="text/javascript">
    var data = [ // <- 程式碼註解 A
        {price: 200, category: "捲簾"},
        {price: 300, category: "直立式軌道"},
        {price: 350, category: "木片百葉窗"},
        {price: 500, category: "木竹簾羅馬"},
        {price: 1000, category: "電動軌道"},
        {price: 800, category: "蜂巢簾"},
        {price: 900, category: "百葉窗"},
        {price: 500, category: "壁紙"},
        {price: 300, category: "耐磨地板"},
        {price: 700, category: "衛浴"},
        {price: 400, category: "馬桶"}
    ];

    function render(data, category) {
        d3.select("body").selectAll("div.h-bar") // <- 程式碼註解 B
                .data(data)
            .enter()
            .append("div")
                .attr("class", "h-bar")
             .append("span");

        d3.select("body").selectAll("div.h-bar") // <- 程式碼註解 C
                .data(data)
            .exit().remove();

        d3.select("body").selectAll("div.h-bar") // <- 程式碼註解 D
                .data(data)
            .attr("class", "h-bar")
            .style("width", function (d) {
                 return (d.price) * 0.6 + "px";}
            )
             .select("span")
                .text(function (d) {
                     return d.category;
                });

        d3.select("body").selectAll("div.h-bar")
                .filter(function (d, i) { // <- 程式碼註解 E
                    return d.category == category;
                })
                .classed("selected", true);
    }

    render(data);

    function select(category) {
        render(data, category);
    }
< /script>

<div class="control-group">
    <button onclick="select('耐磨地板')">
        耐磨地板
    </button>
    <button onclick="select('電動軌道')">
        電動軌道
    </button>
    <button onclick="select('壁紙')">
        壁紙
    </button>
    <button onclick="select()">
        取消選取
    </button>
< /div>

</body>

</html>

重點程式碼講解:

1. 程式碼註解 A ,我在這邊宣告了 一個 data 變數,它存放了一系列 json 格式的物件,該物件 有 2個屬性 分別為 price(記錄價格)、category(記錄類型)。

     var data = [ // <- 程式碼註解 A
        {price: 200, category: "捲簾"},
        {price: 300, category: "直立式軌道"},
        {price: 350, category: "木片百葉窗"},
        {price: 500, category: "木竹簾羅馬"},
        {price: 1000, category: "電動軌道"},
        {price: 800, category: "蜂巢簾"},
        {price: 900, category: "百葉窗"},
         {price: 500, category: "壁紙"},
        {price: 300, category: "耐磨地板"},
         {price: 700, category: "衛浴"},
         {price: 400, category: "馬桶"}
     ];

2.程式碼註解 B,透過 D3 的選取方式

d3.select("body").selectAll("div.h-bar").data(data).enter()

這行程式碼,透將會將 所有數據與 網頁的 <div id=’h-bar’> ,做交集的動作,使得每個數據可以對應各自的 <div id=’h-bar’> 元素。

3.程式碼註解 D,將選取的  <div id=’h-bar’> ,根據 data 的 price 價格 用公式來設定長度,以及透過 text() 來設定文字。

d3.select("body").selectAll("div.h-bar") // <- 程式碼註解 D
                 .data(data)
             .attr("class", "h-bar")
             .style("width", function (d) {
                 return (d.price) * 0.6 + "px";}
             )
            .select("span")
                 .text(function (d) {
                     return d.category;
                 });

4.程式碼註解 E,也是最重要的,我根據 d3 支援的 filter()函數,來過濾要選擇的資料。

d3.select("body").selectAll("div.h-bar")
                 .filter(function (d, i) { // <- 程式碼註解 E
                     return d.category == category;
                 })
                .classed("selected", true);

其他參考文章
HTML CSS 動畫教學–【軟體開發(軟件開發)】
繪圖程式-折線圖、區域圖 實作一
產品報告與能源曲線分析系統
利用 JavaScript D3 在網頁動態產生直條圖(軟體開發、軟件開發)
Java Script D3 資料過濾教學(軟體設計、軟體開發)
利用 JavaScript D3 在網頁動態產生直條圖(軟體開發、軟件開發)


網智數位-軟體開發(軟件開發)
針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:
allen@netqna.com
聯繫電話:0920-883-870
公司電話:02-5599-1310
skype: netqna
line:netqna
微信:netqna
黃先生 Allen