2. 程式人生 > >【D3.js資料視覺化系列教程】（二十五）--載入csv檔案

【D3.js資料視覺化系列教程】（二十五）--載入csv檔案

阿新 • • 發佈：2019-01-30
csv檔案由csv資料生成的圓環
!

  1. 載入csv資料

用到d3.csv函式，第一個引數是地址，第二個引數是個回撥函式

d3.csv("http://localhost:8080/spring/D3data/food.csv",function(error,data){
    if(error){
        console.log(error);
    } else {  //(3)取出其中的數字，和類別名
        for(var i=0;i<data.length;i++){
            numset.push(parseFloat(data[i].Delicious));
            nameset.push(data[i].Food);
        }
        var
 
 pie=d3.layout.pie(numset);// (4)numset轉化資料為適合生成餅圖的物件陣列
        // 略，使用載入的資料畫圓環圖
    }
});

  2. 完整程式碼

<!DOCTYPE html>
<html>
  <head>
        <meta charset="utf-8">
        <title>testD3-23-loadfile.html</title>
        <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"
 
></script>
    <style type="text/css"></style>
    </head>
    <body>
        <script type="text/javascript">
var numset=[] ;//(1)陣列初始化
var nameset=[] ;//全域性變數方便載入完了使用

//(2)載入csv資料
d3.csv("http://localhost:8080/spring/D3data/food.csv",function(error,data){
    if(error){
        console
 
.log(error);
    }else{
        //(3)取出其中的數字，和類別名
        for(var i=0;i<data.length;i++){
            numset.push(parseFloat(data[i].Delicious));
            nameset.push(data[i].Food);
        }
        // (4)numset轉化資料為適合生成餅圖的物件陣列
        var pie=d3.layout.pie(numset);

        var h=300;
        var w=300;

        var outerRadius=w/2;//外半徑

        // 圓環內半徑
        var innerRadius=w/3;

        // 用svg的path繪製弧形的內建方法
        var arc=d3.svg.arc()//設定弧度的內外徑，等待傳入的資料生成弧度
            .outerRadius(outerRadius)
            .innerRadius(innerRadius);

        var svg=d3.select("body")
            .append("svg")
            .attr("width",w)
            .attr("height",h);

        // 顏色函式
        var color=d3.scale.category10();//建立序數比例尺和包括10中顏色的輸出範圍

        // 準備分組,把每個分組移到圖表中心
        var arcs=svg.selectAll("g.arc")
            .data(pie(numset))
            .enter()
            .append("g")
            .attr("class","arc")
            //移到圖表中心
            .attr("transform","translate("+outerRadius+","+outerRadius+")");//translate(a,b)a表示橫座標起點，b表示縱座標起點

        // 為組中每個元素繪製弧形路路徑
        arcs.append("path")//每個g元素都追加一個path元素用繫結到這個g的資料d生成路徑資訊
            .attr("fill",function(d,i){//填充顏色
                return color(i);
            })
            .attr("d",arc);//將角度轉為弧度（d3使用弧度繪製）

        // (6)nameset和numset組合生成文字
        arcs.append("text")//每個g元素都追加一個path元素用繫結到這個g的資料d生成路徑資訊
            .attr("transform",function(d){ 
                return "translate("+arc.centroid(d)+")";//計算每個弧形的中心點（幾何中心）
            })
            .attr("text-anchor","middle")
            .text(function(d,i){
                return nameset[i]+":"+d.value;//這裡已經轉為物件了
            });

    //載入csv回撥函式結束
    }   
});

</script>

</body>
</html>

相關推薦

【D3.js資料視覺化系列教程】（二十五）--載入csv檔案

csv檔案由csv資料生成的圓環!  1. 載入csv資料用到d3.csv函式，第一個引數是地址，第二個引數是個回撥函式d3.csv("http://localhost:8080/spring/D3da

【D3.js資料視覺化系列教程】（二十四）--力導向圖

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-22-force.html</title> <script type="t

【D3.js資料視覺化系列教程】（二十二）--互動圖表之提示條

//鍵值對資料集 var dataset = [ {key:0,value:5}, {key:1,value:10}, {key:2,value:13}, {key:3,value:19}, {key:4,value:21}, {key:5,value:25}, {key:6,value:22}, {ke

【D3.js資料視覺化系列教程】（三十）--力導向圖之帶文字

(1)連結陣列var links = [ {source: "Microsoft", target: "Amazon", type: "licensing" ,weight:1,color:1}, {source: "Microsoft", target:

【D3.js資料視覺化系列教程】--（二）最簡單的開始：新增元素

1. 新增元素語法：[selection].append("p"); 2. 怎麼做？將D3.js解壓到桌面，同時在桌面建立一個index.html<html> <head>

【D3.js資料視覺化系列教程】（十六）--更新、過度和動畫

//(1) 準備資料集 var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; //(2) 設定SVG的高寬 var w=600; va

【D3.js資料視覺化系列教程】（十八）--組合新增刪除

//鍵值對資料集 var dataset = [ {key:0,value:5}, {key:1,value:10}, {key:2,value:13}, {key:3,value:19}, {key:4,value:21}, {key:5,value:25}, {key:6,value:22}, {ke

【D3.JS資料視覺化實戰記錄】繪製動態狀態變化趨勢圖

參考d3js.org的Health&Wealth例項（http://bost.ocks.org/mike/nations/）按照時間展示節點狀態變化。 需要展示的json: [{"calendar":"2012-01-01 12:00:00", "value

【D3.js資料視覺化實戰】--（2）本地時間軸

背景需求 繪製效果 實現思路 關鍵技術 完整程式碼 背景需求 使用D3繪製圖表一般都會繪製一個座標軸，但是用D3畫過圖的同學都知道預設情況下繪製的座標軸刻度是英文的。但是我們要

一.d3.js 資料視覺化

轉載 http://blog.csdn.net/tianxuzhang/article/details/11317667 d3 是什麼？ D3 (或D3.js) 是一個用來使用Web標準做資料視覺化的JavaScript庫。 D3幫助我們使用SVG, Canvas

資料視覺化 三步走（二）：springboot整合mybatis 搭建Java Web

前言     本章節完成第2點：利用springboot + mybatis 作為web後臺服務。 1.環境依賴   1.Win7 + Intellij IDEA 15.0.2 + JDK8 2.建立springboot專案  

資料視覺化-svg入門基礎（二）

接上一篇：資料視覺化-svg入門基礎（一），基礎一主要是介紹了svg概念，元素樣式設定等。 svg是（scalable vector graphic）伸縮向量影象。 一、目錄 （1）圖形元素 （2）文字元素 （3）特殊元素 （4）濾鏡元素 （5）漸變元素   二、圖形元素 1、矩

【轉】JMeter學習（二十五）HTTP屬性管理器HTTP Cookie Manager、HTTP Request Defaults

agen 讀取 expired fault 範圍 運行時 ear 定制 只有一個 Test Plan的配置元件中有一些和HTTP屬性相關的元件：HTTP Cache Manager、HTTP Authorization Manager、HTTP Cookie Manager

【HHHOJ】NOIP2018 模擬賽（二十五） 解題報告

點此進入比賽 得分： \(100+100+20=220\)（\(T1\)打了兩個小時，以至於\(T3\)沒時間打了，無奈交暴力） 排名： \(Rank\ 8\) \(Rating\)：\(+19\) \(T1\)：【HHHOJ126】求和（點此看題面） 看到這道題，我不由得想到這道題目：【BZO

大資料（二十五）：Sqoop的介紹和安裝

一、Sqoop簡介        Sqoop是一種旨在有效的Hadoop和關係型資料庫等結構化資料儲存之間傳輸大量資料的工具。Sqoop的原理就是將匯入或者匯出命令翻譯成mapreduce程式來實現。在翻譯出的mapreduce中主要就是對inputfor

JavaFX UI控制元件教程（二十五）之Color Picker

翻譯自  Color Picker 本章介紹ColorPicker控制元件，提供其設計概述，並說明如何在JavaFX應用程式中使用它。 JavaFX SDK中的顏色選擇器控制元件是一個典型的使用者介面元件，使使用者可以從可用範圍中選擇特定顏色，或通過指定RGB或HSB組合

Vue.js框架--Ui框架的Element UI 按需引入（二十五）

主要操作技能：  1>去官網檢視http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart  藉助 babel-plugin-component，我們可以只引入需要的元件，以達到減小專案體積的目的

Vue.js框架--Ui框架的Element UI（二十四）

主要操作技能：    1>去官網檢視http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart      2>安裝:  cnpm i element-u

[搬運工系列]-JMeter（二十五）新增穩定性測試後的波形圖（同LR） Jmeter（二十三）穩定性測試後的波形圖

Jmeter（二十三）穩定性測試後的波形圖   jmeter-plugins.org 這個網站為 JMeter 提供了一些增強型功能的外掛，使用起來就像 Eclipse 裝外掛一樣，完全做到了外掛的可插拔特性。本文簡要介紹如何使用這些外掛讓你的 JMeter 支援

小白的資料結構與演算法學習筆記（二十六）----廣義表

 一、廣義表的概述 首先回憶一下原子型別和結構型別，簡單說來，原子型別就是不可再分的型別，結構型別就是可以再分的型別。我們前面講的線性表要求每個元素都是原子型別，而廣義表作為線性表的推廣，它的元素可以是原子型別，也可以是個表。元素是原子型別，叫原子結點；元素是表，叫表結點。