js map用法_D3.js学习之一

最新推荐文章于 2023-11-30 17:30:00 发布
最新推荐文章于 2023-11-30 17:30:00 发布
阅读量266 收藏
点赞数
文章标签： js map用法 js select 设置选中 js 数组移除 js根据class获取元素 js设置style

07f2b742a94ffcf4fd8e4a2a61a1825d.png

这书买了一个月了，终于开封了。

D3.js的官网，看官网最新的版本已经到5.7了。

D3.js - Data-Driven Documents​d3js.org
4602716505c65ed06abb66340ee874dd.png

之前对D3.js的印象完全以为它是一个图形库，类似于echart.js那种，各种安利D3.js的广告也都打的是可视化的关键词。

6fdd865e7c418f1fb05e447c2760473f.png

不读书只能被扇醒啊，应该类比成jQuery才对。至少链式的操作跟jQuery是一模一样的。

Hello World

先看一个Hello World感受一下

<!DOCTYPE html>

2952a5e18ec0f686789438289e80b8bd.png

github上的中文手册也不错

d3/d3​github.com
6d8f44379c5bb7b0c6bcf09d02a01971.png

选择器

这跟jQuery一毛一样啊，DOM操作的话选择器确实是基础。

选取单个元素

d3.select( )

d3

选择完了之后可以链式地跟attr、classed、style、text、html各种方法，直接看栗子

d3

选取多个元素

d3.selectAll( )

迭代元素

d3

举一反三，查了下API，没有map，但是有filter

6891dcfabb4af31191c1249c9ffc3c01.png

子选择器

要么使用css的>选择器来选择子元素，要么通过级联继续调用select来选择子元素，至于我们熟悉的jQuery里的children( )，查了一下，在d3里存在于别的对象上

d3

D3.js里的级联调用，返回的都是当前操作或者变化的元素，所以会看到如下的代码

body

获得原始DOM对象

通过D3.js操作后的对象并不是原始DOM对象，这也跟jQuery一样，jQuery里只要调用数组索引[index]或者get(index)方法就能获得，在D3.js里要通过nodes( )方法

d3
weixin_39624700
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
D3.js的基础部分之数组的处理 映射(Map)(v3版本)
weixin_30675967的博客
04-30 1025
映射(Map) 映射(Map)是十分常见的一种数据结构，由一系列键(key)和值(value)组成的。每个key对应一个value，根据key可以获取和设定value,也可以根据key来查询value。 上面那个图展示了一个映射，该映射以每个值得id作为键，每个键对应一个值。 d3.map()能构建映射，包括以下方法: d3.map([object]...
react-d3-treemap:基于使用React构建的d3.treemap的树图
03-20
react-d3-treemap 基于 和构建的TreeMap组件。 演示 特征 为绘画SVG做出React D3用于进行数学计算 安装 在React项目中使用react-d3-treemap的步骤 1.从NPM安装 npm install --save react-d3-treemap 2.导入并在您的应用程序中使用 import TreeMap from "react-d3-treemap" ; // Include its styles in you build process as well import "react-d3-treemap/dist/react.d3.treemap.css" ; 3.用法 interface TreeMapInPutData { name : string ; value ?: number ; children ?: Arra
D3 Map
Claroja
06-22 535
Maps https://github.com/d3/d3/blob/master/API.md#maps d3.map - create a new, empty map. map.has - returns true if the map contains the given key. map.get - get the value for the given key. map.set - set the value for the given key. map.remove - remove the
d3绘制流程图
weixin_43822097的博客
02-16 1072
React使用d3生成workflow 直接上code 节点选择 import React from "react"; import { Tree } from "antd"; export default function Main() { function dragStart({ event, node }) { if (node.parent_id && node.isadd) { event.dataTransfer.setData("node", JSON.string
D3.js数据可视化（一）——绘制热图（heat map）
weixin_30685029的博客
11-07 894
二维标量可视化 1. 实验名称 　　二维标量的可视化。 2. 实验目的 　　使用d3以及提供的NBA篮球上个赛季的数据（basketball statics.xlsx），绘制一个热图（heat map）。 3. 技术基础 　　Web, HTML, DOM, CSS, JavaScript, SVG。 　　核心技术为D3 —— Data-Driven Documents（数据驱动的文档...
d3-geomap:一个基于 D3.js 创建地理地图的库
08-04
安装$ npm install d3-geomap用法ES6： import { select } from 'd3-selection' ;import { geomap } from 'd3-geomap' ;const worldMap = geomap ( ) ;worldMap . geofile ( './node_modules/d3-geomap/src/...
nepal_d3_map:d3.js 中的尼泊尔交互式地图
06-06
这是在 d3.js 中尼泊尔人口区域分布图的实现。 我现在已经完成了非常基本的工作，但这应该是一个很好的起点。 它包括基本的工具提示，作为对初始版本的改进。 请随意贡献和扩展它。 用法： 克隆回购 在文件夹中...
roadmap-visualization:使用 D3.js 的路线图可视化
06-14
D3.js的API被广泛使用，如`d3.scaleOrdinal`用于颜色映射，`d3.forceSimulation`和`d3.forceLink`用于力导向图布局，以及`d3.geoPath`用于地理路径的绘制等。 此外，路线图的生成还需要考虑节点和边的布局。D3.js...
interactive-map:D3.js中的交互式地图
04-30
1. **数据绑定（Data Binding）**: D3.js的核心特性之一是能够将JavaScript数组数据与DOM元素进行绑定。这种绑定使得更新DOM时可以依据数据的变化自动进行。 2. **选择集（Selections）**: D3的选择集类似于jQuery...
threejs-maps:使用 D3.js、Three.js 和 Mapbox 的交互式地图
06-27
D3.js的核心在于它能够绑定任意数据到DOM，并使用数据驱动的方法来操作文档。通过D3，开发者可以精确地控制每一个元素，从而实现高度定制化的视觉效果。 2. **Three.js**：这是一个JavaScript的3D库，为WebGL提供了...
用js实现map功能
04-27
* Map对象，实现map功能 * put(key, value) 向map中增加键值对 * 例子: * var map = new Map(); * * map.put("key", "value"); * var val = map.get("key");
jquery中map函数遍历数组用法实例
10-24
主要介绍了jquery中map函数遍历数组用法,实例分析了jQuery中map函数遍历数组的相关技巧,并提供了一个自定义遍历数组函数供参考之用,需要的朋友可以参考下
用JS对象实现map功能与方法
06-06
部分IE浏览器不支持ecmascript 6,无法使用map对象，用原生js对象实现map功能
GeoSpatial-Map-US_States:使用Javascript和D3.Js库的美国总人口地理空间图
04-07
本项目“GeoSpatial-Map-US_States”就是这样一个实例，它利用JavaScript和D3.js库，巧妙地将美国各州的人口数据转化为交互式的地理空间图，为用户提供直观且易于理解的视觉体验。 D3.js，全称Data-Driven ...
使用D3.js创建物流地图的示例代码
10-18
在本文中，我们将深入探讨如何使用D3.js库来创建一个物流地图。D3.js（Data-Driven Documents）是一种强大的JavaScript库，它允许开发者将数据绑定到DOM（文档对象模型）上，并利用数据驱动的转换来操作文档。在物流...
d3.js绘制地图，支持点击等事件
最新发布
weixin_57182748的博客
11-30 854
目前项目中遇到的需求是画出一个静态地图，并支持一些基本的点击事件，此次是使用d3.js制作的（d3真的从入门到放弃了），话不多说直接上代码吧，可以直接复制下来就可以用的。一些扩展的功能大家可以自由发挥，d3.js官网（
可视化工具D3.js教程 入门 （第十四章）—— 中国地图
weixin_44867717的博客
09-23 1901
可视化工具D3.js教程 入门 （第十四章）—— 中国地图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中国地图</title> <script src="./d3.min.js"></script> </head> <body> <svg wi
js中map()函数的使用
热门推荐
daishu_shu的博客
04-12 4万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、概念二、相关语法三、示例最后 前言 关键词：map 项目中我们常常会遇到要对后端返回的数据进行修改，从而达到符合我们前端开发人员的需要，其中map是常用到的对数组元素进行修改的重要函数。 提示：以下是本篇文章正文内容，下面案例可供参考 一、概念 map() 方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。值得注意的是：1、map()函数不会对空数组进行检测；2.
js中map的使用方法
目标检测专栏持续更新中，改进YOLO系列通用，适用v5、v7、v8、所有博客均是团队原创博客，所有文章禁止转载，违者必究。
03-21 6489
map在js中的功能相当强大，故整理此文加深记忆。 一、概念 map()方法定义在JavaScript的Array中，它返回一个新的数组，新返回数组中的每个元素为原始数组的每一个元素分别调用map中的回调函数处理后的值。 注意： map()不会对空数组进行检测 map()不会改变原始数组（返回新数组） map()不会为数组中缺少的元素调用回调函数 除数组对象外，map()可由具有length属性且具有已按数字编制索引名的任何对象使用（如字符串对象） 二、语法 array.map(function(c

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值