2. 程式人生 > >D3.js-散點圖

D3.js-散點圖

阿新 • • 發佈：2019-02-17
var dataset = [[0.5, 0.5],[0.7, 0.8],[0.4, 0.9], [0.11, 0.32],[0.88, 0.25],[0.75, 0.12], [0.5, 0.1],[0.2, 0.3],[0.4, 0.1]]; var width = 400; // 可視區域寬度 var height = 400; // 可視區域高度 var xAxisWidth = 300; // x軸寬度 var yAxisWidth = 300; // y軸寬度 var
padding = {top: 20, right: 20, bottom:20, left:50}; var svg = d3.select("body").select("#content") .append("svg") .attr("width", width).attr("height", height); /*定義比例尺*/ var xScale = d3.scale.linear() .domain([0, 1]) .range([0
, xAxisWidth]); var yScale = d3.scale.linear() .domain([0, 1]) .range([0, yAxisWidth]); /* 繪製圓點 */ function drawCircle(){ var circleUpdate = svg.selectAll("circle").data(dataset); // update處理 circleUpdate.transition().duration(500
) .attr("cx", function(d){ return padding.left + xScale(d[0]); }) .attr("cy", function(d, i){ return height - padding.bottom - yScale(d[1]); }) .attr("r", 5); // enter處理 circleUpdate.enter().append("circle") .attr("cx", function(d){ return padding.left; }) .attr("cy", function(d, i){ return height - padding.bottom; }) .attr("r", 5) .transition().duration(500) .attr("cx", function(d, i){ return padding.left + xScale(d[0]); }) .attr("cy", function(d, i){ return height - padding.bottom - yScale(d[1]); }); // exit處理 circleUpdate.exit() .transition().duration(500) .attr("fill", "white") .remove(); } /* 新增座標軸 */ function drawScale(){ var xAxis = d3.svg.axis().scale(xScale).orient("bottom"); yScale.range([yAxisWidth, 0]); // 重新設定y軸比例尺的值域,與原來的相反 var yAxis = d3.svg.axis().scale(yScale).orient("left"); svg.append("g").attr("class", "axis") .attr("transform", "translate("+ padding.left +","+ (height - padding.bottom) +")") .call(xAxis); svg.append("g").attr("class", "axis") .attr("transform", "translate("+ padding.left +","+ (height - padding.bottom - yAxisWidth) +")") .call(yAxis); // 繪製完比例尺,還原比例尺y軸值域 yScale.range([0, yAxisWidth]); } // 初始化 window.addEventListener("load", function(){ drawCircle(); drawScale(); }); var toFixed = Number.prototype.toFixed; /* 更新 */ function update(){ for(var i = 0, len = dataset.length; i < len; i++){ dataset[i][0] = +toFixed.call(Math.random(), 2); dataset[i][1] = +toFixed.call(Math.random(), 2); } drawCircle(); } /* 增加 */ function add(){ dataset.push([+toFixed.call(Math.random(), 2), +toFixed.call(Math.random(), 2)]); drawCircle(); } /* 刪除 */ function sub(){ dataset.pop(); drawCircle(); }

相關推薦

D3.js-散點圖

var dataset = [[0.5, 0.5],[0.7, 0.8],[0.4, 0.9], [0.11, 0.32],[0.88, 0.25],[0.75, 0.12], [0.5, 0.1],[0.2, 0.3],[0.

D3.js 繪制散點圖

all pan 使用 坐標 ase span var enter 同時 對於散點圖，使用的數組需要包含坐標元素，即 x, y。同時，散點圖需要使用 circle 元素。 var svg = d2.select("body") .append("svg")

利用echarts highcharts 實現自定義地圖 關系圖效果 側邊3D柱形圖餅圖散點圖

技術 ges 散點圖 chart blog 餅圖 git 分享 charts github 地址： https://https://github.com/Gengshaoxuan/medataMap github 地址： https://https://github.c

散點圖的繪制

ges colorbar ylabel sta pyplot itl 圖片 image sca 1.普通散點圖的繪制。 import numpy as np import matplotlib.pyplot as plt y = np.random.standard_n

JavaScript數據可視化編程學習（一）Flotr2，包含簡單的，柱狀圖，折線圖，餅圖，散點圖

基礎 沒有 cat 勝利 而是 5.4 最好的 表數據 聯系 一、基礎柱狀圖 二、基礎的折線圖 三、基礎的餅圖 四、基礎的散點圖 一、基礎柱狀圖 如果你還沒有想好你的數據用什麽類型的圖表來展示你的數據，你應該首先考慮是否可以做成柱狀圖。柱狀圖可以表示數據的

Python數據可視化——使用Matplotlib創建散點圖

obj 工作目錄 復制 轉換 .fig utf ont 指定 後端 Matplotlib簡述： 　　Matplotlib是一個用於創建出高質量圖表的桌面繪圖包（主要是2D方面）。該項目是由John Hunter於2002年啟動的，其目的是為Python構建一個MATLAB式

散點圖

inf wid post and div 技術分享 scatter bubuko alt c=T:顏色序列 x=np.random.rand(1000) y=np.random.rand(1000) T=np.random.rand(len(x))*5 plt.scatt

《機器學習實踐》2.2.2分析數據：使用matplotlib創建散點圖

使用 其中 rate div space sca literal ax1 鏈接 #輸出散點圖 def f(): datingDataMat,datingLabels = file2matrix("datingTestSet3.txt")

[Python Study Notes]氣泡散點圖繪制

num sys otl 計算 BE inf main AC ges ‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘ >

matplotlib(一)：散點圖

IT color src http 17. mark .py TP 數組 import numpy as np import matplotlib.pyplot as plt #產生測試數據 # x,y為數組 N = 50 x = np.random.rand(N) y=

Excel 添加散點圖並添加趨勢線

ima info 屬性設置 輪廓線 需要 在線 bubuko del 系列 選中數據，插入>>>散點圖，選擇合適的格式，如果要有兩條趨勢線，需要有3列數據。 1.1修改散點1的屬性，單擊選中，在設置數據系列格式的“標記之“數據標記選項”，類型選擇（三角、圓

Matplotlib學習---用matplotlib畫散點圖，氣泡圖（scatterplot, bubble chart）

1.4 shrink 關系 ots 讀取csv文件 指南 read -- 我們 Matplotlib裏有兩種畫散點圖的方法，一種是用ax.plot畫，一種是用ax.scatter畫。 一. 用ax.plot畫 ax.plot(x,y,marker="o",color="

Python交互圖表可視化Bokeh：3. 散點圖

spa radius zip code ngs filter let rom alpha 散點圖 ① 基本散點圖繪制② 散點圖顏色、大小設置方法③ 不同符號的散點圖 1. 基本散點圖繪制 import numpy as np import pandas as

echarts圖表tooltip浮動框顯示單位——散點圖

專案中要求在圖表的浮動提示窗上顯示相對應的單位如圖： 方法有二，如下： 方法1： 利用自定義提示框進行拼接： 但是這樣的話根據後臺返回的資料格式的不同進行處理，在tooltip的formatter中進行拼接即可，注意這樣的話要考慮的情況比較多。 方法2（如果和後臺商量好可以

R語音ggplot2繪製好看的分組散點圖

我們以iris資料集為例，該資料集包括花萼的長度和寬度，花瓣的長度和寬度，以及物種，如下圖： 本文我們要繪製不同物種下花萼的長度和寬度的分佈情況，以及二者之間的相關性關係。 1. 首先載入ggplot2包， library(ggplot2) 2. 然後進行ggplot(data =

Python篇：用python畫xy散點圖

python畫xy散點圖測試筆記 import matplotlib.pyplot as plt plt.title("I'm a scatter diagram.") plt.xlim(xmax=7,xmin=0) plt.ylim(ymax=7,ymin=0) plt.anno

Python篇：三維散點圖scatter介紹

    ##畫個簡單三維圖 import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D ax = plt.figure().add_subplot(111, pr

改良昨天的指令碼，讀取CSV檔案生成散點圖

需要讀取的CSV檔案，資料參考以下表頭順序 讀取成功後生成散點圖檔案 “散點圖.html" 開啟網頁檔案時，同目錄下需要有 echarts.min.js 散點圖效果：   程式碼如下： # -*- coding: utf-8 -*- """ 讀取cs

數字的可視化：python畫圖之散點圖sactter函數詳解

使用方法 顏色 inf num 測試 基本 mark 編程 div 最近開始學習python編程，遇到scatter函數，感覺裏面的參數不知道什麽意思於是查資料,最後總結如下： 1、scatter函數原型 2、其中散點的形狀參數marker如下： 3、其中

MATLAB三維散點圖的繪製（scatter3、plot3），同時標明序號

（1）函式scatter3   用法：scatter3(x,y,z,'.',c) % c 為顏色，需和x,y,z長度相同   例子： x=[4229042.63      4230585.02&nbs