2. 程式人生 > >D3.js 柱形圖資料更新

D3.js 柱形圖資料更新

阿新 • • 發佈：2019-02-11
let dataset = [50, 43, 120, 87, 99, 167, 300]; // svg繪製區域的寬度 let width = 400; // svg繪製區域的高度 let height = 400; // 選擇body let svg = d3.select('body') // 新增svg .append('svg') // 設定svg的寬度屬性 .attr('width', width) // 設定svg的高度屬性
.attr('height', height); // 定義上下左右的邊距 let padding = { top: 20, right: 20, bottom: 20, left: 20 }; // 矩形所佔寬度（包括百空）， 單位畫素 let rectStep = 35; // 矩形所佔寬度（不包括百空）， 單位畫素 let rectWidth = 30; function draw ()
{ // 獲取矩形的update部分 let updateRect = svg.selectAll('rect') .data(dataset); // 獲取矩形的enter部分 let enterRect = updateRect.enter(); // 獲取矩形的exit部分 let exitRect = updateRect.exit(); // 矩形的update部分的處理方法
// 設定顏色為steelbule updateRect.attr('fill', 'steelblue') // 設定矩形的x座標 .attr('x', function (d, i) { return padding.left + i * rectStep; }) // 設定矩形的y座標 .attr('y', function (d) { return height - padding.bottom - d; }) // 設定矩形的寬度 .attr('width', rectWidth) // 設定矩形的高度 .attr('height', function (d) { return d; }) // 矩形的enter部分的處理方法 // 設定矩形顏色為steelblue enterRect.append('rect') // 設定顏色為steelbule .attr('fill', 'steelblue') // 設定矩形的x座標 .attr('x', function (d, i) { return padding.left + i *rectStep; }) // 設定矩形的y座標 .attr('y', function (d) { return height - padding.bottom -d; }) // 設定矩形的寬度 .attr('width', rectWidth) // 設定矩形的高度 .attr('height', function (d) { return d; }); // 矩形的exit部分的處理方法 exitRect.remove(); // 獲取文字的update部分 let updateText = svg.selectAll('text') .data(dataset); // 獲取文字的enter部分 let enterText = updateText.enter(); // 獲取文字的exit部分 let exitText = updateText.exit(); // 設定文字填充色 updateText.attr('fill', 'white') // 設定字型大小 .attr('font-size', '14px') // 後續為文字設定為矩形正中間 .attr('text-anchor', 'middle') // 設定x的與矩形一樣 .attr('x', function (d, i) { return padding.left + i * rectStep; }) // 設定y的與矩形一樣 .attr('y', function (d) { return height - padding.bottom - d; }) .attr('dx', rectWidth / 2) .attr('dy', '1em') // 設定文字內容 .text(function (d) { return d; }) enterText.append('text') // 設定文字填充色 .attr('fill', 'white') // 設定字型大小 .attr('font-size', '14px') // 後續為文字設定為矩形正中間 .attr('text-anchor', 'middle') // 設定x的與矩形一樣 .attr('x', function (d, i) { return padding.left + i * rectStep; }) // 設定y的與矩形一樣 .attr('y', function (d) { return height - padding.bottom -d; }) .attr('dx', rectWidth / 2) .attr('dy', '1em') .text(function (d) { return d; }); exitText.remove(); } function mysort() { //資料從小到大排序 dataset.sort(d3.ascending); draw(); } function myadd() { // 新增隨機數 dataset.push(Math.floor(Math.random() * 100)) draw() }

相關推薦

D3.js 柱形圖資料更新

let dataset = [50, 43, 120, 87, 99, 167, 300]; // svg繪製區域的寬度 let width = 400; // svg繪製區域的高度 let height = 400;

D3.js 柱形圖

let dataset = [50, 43, 120, 87, 99, 167, 300]; // svg繪製區域的寬度 let width = 400; // svg繪製區域的高度 let height = 400;

echart折線圖 柱形圖 資料格式化 動態繫結資料 frame處理

var myChart; var eCharts; require.config({ paths : { 'echarts' : '${pageContext.reques

D3生成柱形圖新增滑鼠事件(一）

 直接上程式碼，這是動態生成的柱形圖，並添加了滑鼠事件 <html> <head> <meta charset="utf-8"> <title>8.1.1 滑鼠互動</t

d3.js——給柱形圖添加事件出現的問題總結

htm 代碼 lac ring tle log 顏色 out edge 首先做出一個動態的柱形圖（這兒用的d3.js的版本是v3，用v4的話有些函數會發生變化） 效果圖： 代碼： <!DOCTYPE html> <html lang="en">

D3.js繪製柱形圖

注意：此次繪製的柱形圖不涉及座標。 步驟： 一.新增矩形。 <script type="text/javascript"> var datest = [30,78,90,210,105,98,150,177]; //繪製柱形圖所用的資料 var wid

d3 畫簡單的柱形圖

pen oca func vba head 高度 turn cti ret <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-3

讀取Excel資料根據經緯度調取阿里雲API獲取地址名稱 + 柱形圖轉化顯示 實戰

1、需求： 前兩天接到boss給我的一個任務，需要根據經緯度資訊統計省份分佈，boss給了我一張excel，包含資料包括：經度、緯度、使用次數，想要我統計每一個省份的次數之後 2、解決思路： 通過檔案讀取方式獲得對應經度、緯度、使用次數資料，，然後呼叫阿里雲或者高德地圖的API就可

vue.js使用vue-echarts給柱形圖繫結點選事件

<template> <div class="echarts"> <IEcharts :option="bar" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>

Python對錶格的資料進行處理然後在Excel中製作柱形圖

# -*- coding: utf-8 -*- import sys reload(sys) sys.setdefaultencoding('utf8') from matplotlib.font_manager import FontProperties import

Python中畫柱形圖分析資料（分析各國紅酒的好酒佔比資料）

最近有網友求助一個分析紅酒資料畫柱形圖的問題，之前沒畫過柱形圖，所以特意去研究了一下。 分享一下畫柱形圖的方法，以下是程式碼： # -*- coding:utf8 -*- import matplotlib.pyplot as plt from numpy import

Echarts資料視覺化series-bar柱形圖詳解，開發全解+完美註釋

全棧工程師開發手冊 （作者：欒鵬） Echarts資料視覺化series-bar柱形圖詳解全解： mytextStyle={ color:"#333", //文字顏色 fontSty

勒布朗生涯資料視覺化（二）用Matplotlib製作柱形圖及Figure, Text類和bar函式的引數探索

簡介 本篇文章使用Kaggle.com上的資料集NBA Players stats since 1950中的Seasons_Stats.csv，其包含從1950至今的每個賽季的球員資料，每條資料有53項欄目，是綜合性較強的NBA資料集，我嘗試從中提取勒布朗詹姆

網頁，html5,canvas，js 動態繪製柱形圖

<!DOCTYPE html>     <head><title>chart demo</title>         <style>             #chartContainer{          

java實現各種資料統計圖（柱形圖，餅圖，折線圖）

最近在做資料探勘的課程設計，需要將資料分析的結果很直觀的展現給使用者，這就要用到資料統計圖，要實現這個功能就需要幾個第三方包了： 1.       jfreechart-1.0.13.jar 2.       jcommon-1.0.16.jar 3.       gnuj

柱形圖，餅狀圖JavaScript

column 註意 文件 label max number span item pointf <script type="text/javascript"> $(function () { $(‘#container_2‘).highcharts({

在Echarts 柱形圖的單擊事件中寫入自定義的參數

cnblogs img ges == innerhtml .com echart 通過 code

ECHARTS柱形圖和餅圖數值顯示

echartsECHARTS柱形圖和餅圖數值顯示，官方文檔寫的很不錯，這裏自己單獨梳理一下，以後可能會用的到。1、柱形圖數值顯示 在option添加： label:{ normal:{ show: true, position: ‘to

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

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

ECharts之餅圖和柱形圖demo

www. 操作 orm 成功 rest dom jquer oos mat <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loos