随笔分类 -  web-数据可视化

转 - GeoJSON和TopoJSON
摘要：GeoJSON 和 TopoJSON GeoJSON和TopoJSON是符合JSON语法规则的两种数据格式，用于表示地理信息。 1. GeoJSON GeoJSON 是用于描述地理空间信息的数据格式。GeoJSON 不是一种新的格式，其语法规则是符合 JSON 格式的，只不过对其名称进行了规范，专门 阅读全文
posted @ 2020-10-10 14:36 lemon-Xu 阅读(448) 评论(0) 推荐(0)
笔记 d3.js 数据可视化 初探
摘要：数据可视化-d3.js 1-6 1. 环境配置 1.1 配置React + TS 这里使用脚手架配置： npx create-react-app react-typescript-demo --typescript 2. 使用D3查询SVG 2.1 d3.select(xxx) d3.select( 阅读全文
posted @ 2020-10-06 15:39 lemon-Xu 阅读(1342) 评论(0) 推荐(0)
原创 - react + d3.js + ts 实现日轮图 类型优化
摘要：react + d3.js + TS 日轮图 类型优化 1. 结构 interface IDatum { name: string; popularity? number; children?: this[]; } 2. 类型优化 2.1 d3.partiion<>() let root: d3.H 阅读全文
posted @ 2020-10-06 11:10 lemon-Xu 阅读(250) 评论(0) 推荐(0)
原创- react + d3.js +TS 实现冰柱图 类型优化
摘要：react + d3.js + TS 实现冰柱图 1. 结构 interface IDatum { name: string; children?: this[]; populariy?: number; } 2.1 类型优化 2.1.1 d3.partition<>()() d3.json<IDa 阅读全文
posted @ 2020-10-06 10:28 lemon-Xu 阅读(270) 评论(0) 推荐(0)
原创 - react + d3.js + ts 实现树图 报错解决
摘要：react + d3.js + ts 实现树图 报错解决 1. 结构 interface IGamesDatum { name: string; popularity: number; } interface IDatum { name: string; children: this | IGame 阅读全文
posted @ 2020-10-05 21:15 lemon-Xu 阅读(641) 评论(0) 推荐(0)
原创 - d3.js hierarchyc的常见数据结构
摘要：d3.js hierarchy的常见数据结构 1. d3.hierarchy(data, [children]) 根据指定的层级数据构造一个根节点。指定的数据必须是代表根节点的对象，例如： { "name": "Eve", "children": [ { "name": "Cain" }, { "n 阅读全文
posted @ 2020-10-05 20:42 lemon-Xu 阅读(1556) 评论(0) 推荐(0)
原创 - react + d3.js + TS 堆叠条形图 报错解决
摘要：react + d3.js + TS 堆叠条形图 报错解决 1. 结构 结构请看之前的文章，这里记录部分报错解决的方式。能力受限无法解决方式不会优雅。 2. 报错 2.1 stack生成器报错 var naiveStack = d3.stack().keys(naiveKeys).order(d3. 阅读全文
posted @ 2020-10-04 15:06 lemon-Xu 阅读(371) 评论(0) 推荐(0)
原创 - react +d3.js +TS 实现地理图 报错解决
摘要：reac +d3.js +TS 实现地理图 报错解决 1. 结构 结构请看之前的文章，这里记录部分报错解决的方式。能力受限无法解决d3-tip报错问题。 2. 报错 2.1 Property 'features' does not exis on type 'Feature<Point, GeoJs 阅读全文
posted @ 2020-10-03 16:29 lemon-Xu 阅读(607) 评论(0) 推荐(0)
原创 - react + TS + d3.js 实现曲线图 报错问题解决
摘要：react + TS + d3.js 实现曲线图 报错问题解决 1. 结构 1.1 整体结构 // lemon import React, { useRef, useState, useEffect, useReducer } from "react"; import * as d3 from "d 阅读全文
posted @ 2020-10-02 21:10 lemon-Xu 阅读(669) 评论(0) 推荐(0)
d3.js + React + TS: 数据可视化 7~10
摘要：数据可视化-d3.js 7-10 7. Data-Join 本质上是将数据与图元进行绑定。 使用Data-Join可以省去大量 根据数据设置图元属性 的代码量。 对于 动态变化的数据 提供统一的接口。 以数据为中心的可视化操作 根据数据的每个属性自动调整绑定图元的属性。 不再需要手动添加、'修改'、 阅读全文
posted @ 2020-10-01 16:05 lemon-Xu 阅读(307) 评论(0) 推荐(0)
d3.js + React + TS: 数据可视化 1~6
摘要：数据可视化-d3.js 1. 环境配置 1.1 配置React + TS 这里使用脚手架配置： npx create-react-app react-typescript-demo --typescript 2. 使用D3查询SVG 2.1 d3.select(xxx) d3.select('#re 阅读全文
posted @ 2020-10-01 12:05 lemon-Xu 阅读(732) 评论(0) 推荐(0)