Dimple.js基础

dimple是建立在D3基础上的库，通过他我们可以操控抽象级的图表。

启动本地HTTP服务

python -m http.server

在命令行窗口下输入命令，默认是8000端口。

要想停止本地服务器，输入

Control -c

退出过程

用dimple.js来画图

      function draw(data) {/*D3.js setup code*/
"use strict";var margin = 75,width = 1400 - margin,height = 600 - margin;debugger;   var svg = d3.select("body").append("svg").attr("width", width + margin).attr("height", height + margin).append('g').attr('class','chart');/*Dimple.js Chart construction code*/var myChart = new dimple.chart(svg, data);#表示X轴采用什么数据类型，这里是用TImeAxis函数规定的连续时间值。#第一个变量是我们要添加哪个轴，这是是x轴。第二个变量是我们要在这个轴上写什#么信息#这一行的代码意思是向图表中添加一个时间轴，他由图表中的x轴表示，对应于数据##中的年分列var x = myChart.addTimeAxis("x", "year"); #在图表中的y轴上添加连续值，对应于数据中的观赛人数列myChart.addMeasureAxis("y", "attendance");#addSeries规定了我们准备制作图表的类型，在这个例子中，我们传递一个dimple.pl#ot.bar类型的图表。这个null参数的意思是告诉 Dimple #不要以任何方式为柱子分面或进行组合myChart.addSeries(null, dimple.plot.bar);#最后一行命令用来画图myChart.draw();};

我们只需要更改几个简单的命令，再从新加载之后，得到的就是新的图像

原图：

更改命令：

新图：

定制Dimple图表

给图表的小圆点上色

如果我们想要将我们最新构造的一张图中的圆圈用红色来填充该怎么做呢？

在图中对小圆圈右键审查元素，可以发现小圆圈对应的是一个dimple-series-1

在HTML文件中，我们只需要向整个页面中添加一个CSS样式，确保其中含有dimple-series-1类的圆。

选择带有dimple-series-1类的圆圈元素，然后涂上红色就可以了

添加如下代码

图片变成红色了

给图表添加标题

我们添加如下代码生成标题

效果如图

但是标题效果还不是很好，有点偏，我们让标题居中

最后代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="http://d3js.org/d3.v3.min.js"></script><script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script><style>circle.dimple-series-1{fill: red;}h2{text-align:center;}</style><script type="text/javascript">function draw(data) {/*D3.js setup code*/
"use strict";var margin = 75,width = 1400 - margin,height = 600 - margin;d3.select('body').append('h2').text("World Cup Attendance");var svg = d3.select("body").append("svg").attr("width", width + margin).attr("height", height + margin).append('g').attr('class','chart');/*Dimple.js Chart construction code*/var myChart = new dimple.chart(svg, data);var x = myChart.addTimeAxis("x", "year"); myChart.addMeasureAxis("y", "attendance");myChart.addSeries(null, dimple.plot.scatter);myChart.addSeries(null, dimple.plot.line);myChart.draw();};</script></head>
<body><script type="text/javascript">/*Use D3 (not dimple.js) to load the TSV fileand pass the contents of it to the draw function*/d3.tsv("world_cup.tsv", draw);</script>
</body>
</html>

Dimple.js基础相关推荐

构建node.js基础镜像_我如何使用Node.js构建工作抓取网络应用
构建node.js基础镜像 by Oyetoke Tobi Emmanuel 由Oyetoke Tobi Emmanuel 我如何使用Node.js构建工作抓取网络应用 (How I built a ...
构建node.js基础镜像_在Android上构建Node.js应用程序
构建node.js基础镜像 by Aurélien Giraud 通过AurélienGiraud 在Android上构建Node.js应用程序-第1部分:Termux,Vim和Node.js (Bu ...
JS基础知识学习（一）
JS基础知识前端开发常用的浏览器谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
前端面试题目汇总摘录（JS 基础篇 —— 2018.11.01更新）
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
JS基础篇--HTML DOM classList 属性
页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加 ...
js基础--数据类型检测的相关知识
欢迎访问我的个人博客:www.xiaolongwu.cn 前言最近工作有点忙,好几天都没更新技术博客了. 周末起床打开有道云笔记,发现自己的博客todolist里躺了一堆只有名字的文件. 话不多说, ...
【译】一份通俗易懂的React.js基础指南-2018
原文链接:tylermcginnis.com/reactjs-tut- by Tyler McGinnis 这篇文章最初发表于2015年1月,但最近被更新为React 16.3以及它所包含的所有优点. ...
SVG.js 基础图形绘制整理（二）
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...