d3 + geojson in node
d3.js本来主要是用于用“数据驱动dom”,在浏览器端,接收后端数据,数据绑定,渲染出svg。
即使是在ng中用,也是会由框架打包,供客户端下载。
那么,如果用所谓后端渲染,发布静态的svg,那就要在node里用d3。
几个遇到的点:
1 d3+jsdom实现后端渲染svg
node和前端的区别,就是没有全局window.document 这个对象。d3选择器无从选起。
1 创建jsdom对象
const { JSDOM } = require("jsdom"); const my_jsdom = new JSDOM(
`
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
`, {
resources: 'usable'
}
);
反引号中是一个空白网页模板,用过flask的jinja2 和ng的 templates的不会陌生,模拟浏览器里的window.document全局对象。
2 导入d3模块,并让d3获得这个模拟的网页。
//按需导入d3
var d3 = Object.assign({}, require("d3-selection"), require("d3-selection-multi"), require("d3-geo"));
//导入模拟的geojson数据
import {default as gdf} from './mock_polygon_gdf.json'; //让d3绑定到模拟的网页
const d3n = d3.select(my_jsdom.window.document); const svg = d3n.select('body')
.insert('svg','records')
.attr('width', 2400)
.attr('height', 3000);
.append('g')
.selectAll('path')
.data(gdf['features'])
.enter()
.append('path')
.attr("d", d3.geoPath()
写这么长,是想说明,注意绑定当前网页后的对象命名为d3n, 不要和开始导入的d3库混淆。
在浏览器里,d3是通过html里写另外一个<script>引入d3.min.js 直接都导入好了,而且是直接d3.select('body')的。
在node这里加了一步,而且后面主要是用d3n来做后面的工作。
前面导入的d3库对象,也是有用的。比如后面的d3.geoPath()方法
经过这样的d3一顿绑定,svg画好了。还差最后一步:
3把网页输出成string,保存到.html文件
const content = my_jsdom.serialize(); fs.writeFile('${fpath}/${fname}.html', content, { encoding: "utf8", flag: "w" }, (err) =>{
if (err) {
throw err;
}
});
2. 按需分模块导入d3 子module
d3发展到v4 v5之后,功能膨胀,体积变大,除了集中发布的d3 还分离成若干独立子组件,可以按需加载。
而且,有些子组件并没有打包到d3中,必须自己手动安装,按需加载
根据d3官网,node中按需加载是这样的:https://github.com/d3/d3/blob/master/README.md
In Node:
var d3 = require("d3");You can also require individual modules and combine them into a
d3
object using Object.assign:
var d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection"));
用Object.assign() 打包成一个d3对象
3 一次为selection添加多个attr
特别是不知道attr具体名字,但attr的{name:value}都在需要绑定的数据中的时候
要用到独立于d3的子组件d3-selection-multi
按上面的方式,分组导入(我只用到3个,d3-selection必选,d3-geo是为了绑定geojson)
var d3 = Object.assign({}, require("d3-selection"), require("d3-selection-multi"), require("d3-geo"));
这样就可以:
const enter = g.selectAll('path')
.data(gjson['features'])
.enter()
.append('path')
.attrs(
(d)=> Object.assign({id: (d) => d['id']}, d['properties'])
);
4 绑定geojson格式数据
const enter = g.selectAll('path')
.data(gjson['features'])
.enter()
.append('path')
.attr("d", d3.geoPath());
通过数据绑定,enter新增数据,添加path,直接一句搞定。
5 d3选择集上消失的update()方法,改用merge()
给出的答案是用merge,确实更优雅了
把enter和update合并处理了
// Perform the data join and obtain the update selection.
const option = d3.select("#mySelect")
.selectAll("option")
.data(optionsData); // Append the entering nodes, and obtain the enter selection.
const enter = option.enter().append("option"); // Merge entering and updating nodes to apply some operations to both.
enter.merge(option)
.property("value", d => d.value)
.text(d => d.label); // Remove the exiting nodes.
option.exit().remove();
d3 + geojson in node的更多相关文章
- D3.js部署node环境开发
总结一段D3.js部署node环境的安装过程 准备阶段: 首先电脑上要安装node环境,这个阶段过滤掉,如果node环境都不会装,那就别玩基于node环境搞的其他东西了. 搭建环境: 我在自己的F:系 ...
- D3.js学习记录 - 数据类型【转】【新】
1.变量 JAVASCRIPT的变量是一种类型宽松的语言.定义变量不用指定数据类型.而且还是动态可变的. var value = 100;value = 99.9999;value = false;v ...
- D3 JS study notes
如何使用d3来解析自定义格式的数据源? var psv = d3.dsvFormat("|"); // This parser can parse pipe-delimited t ...
- [D3] Build an Area Chart with D3 v4
Similar to line charts, area charts are great for displaying temporal data. Whether you’re displayin ...
- [D3] Build a Line Chart with D3 v4
Line charts are often used to plot temporal data, like a stock price over time. In this lesson we’ll ...
- [D3] Build a Scatter Plot with D3 v4
Scatter plots, sometimes also known as bubble charts, are another common type of visualization. They ...
- [D3] Build a Column Chart with D3 v4
Column and bar charts are staples of every visualization library. They also make a great project for ...
- [D3] Make D3 v4 Charts Responsive with the viewBox attribute
Making SVGs responsive is unfortunately not as simple as adding some media queries. This lesson intr ...
- d3.js制作连线动画图和编辑器
此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/11431679.html 连线动画图 编辑器 效果如上图所示.本项目使用主要d3.jsv4制作,分 ...
随机推荐
- bzoj1663: [Usaco2006 Open]赶集
Description Every year, Farmer John loves to attend the county fair. The fair has N booths (1 <= ...
- Springbooot +Mybaties 配置数据库多数据源
前言 在实际项目中,我们可能会碰到在一个项目中会访问多个数据库的情况.针对这种情况,我们就需要配置动态的数据源了.一般按照以下步骤即可 一.在启动类上添加注解 二.在application.prope ...
- topcoder srm 465 div1
problem1 link 以两个点$p,q$为中心的两个正方形的边长和最大为$2dist(p,q)$,即$p,q$距离的两倍. 也就是两个$p,q$的连线垂直穿过两个正方形的一对边且平分两个正方形. ...
- 我为什么选择Go语言(Golang)
作为一个以开发为生的程序员,在我心目中编程语言如同战士手里的武器,好与不好主要看使用的人是否趁手.是否适合,没有绝对的高低之分. 从2013年起,学习并使用Golang已经有4年时间了,我想叙述一下我 ...
- thinkphp在前端页面的js代码中可以使用 U方法吗? 可以使用模板变量如__URL__等吗?
thinkphp在前端页面的js代码中可以使用 U方法吗? : 可以的! tp的U方法, 是"全局的", 什么是全局的? 就是, 可以在 "任何地方"使用的: ...
- Web、OAuth2/SSO相关拾遗
OAuth2认证相关:(SSO资源访问流程也应类似设计,它与OAuth2第三方认证.授权不同,是同一个应用系统间的认证.授权过程,且需要实现一个点授权,可访问所有点,一个点退出,收回所有点授权,且有时 ...
- sql 之 INSERT IGNORE
INSERT IGNORE 与INSERT INTO的区别就是INSERT IGNORE会忽略数据库中已经存在 的数据,如果数据库没有数据,就插入新的数据,如果有数据的话就跳过这条数据.这样就可以保留 ...
- c# 之 事务
SqlTransaction事务的简单例子 { DataTable dt = new DataTable(); System.Data.SqlClient.SqlConnection cnn = ne ...
- springBoot 全局异常捕捉
package cn.com.cs.core.exception; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import or ...
- (转)Introductory guide to Generative Adversarial Networks (GANs) and their promise!
Introductory guide to Generative Adversarial Networks (GANs) and their promise! Introduction Neural ...