当前位置: 首页 > 编程笔记 >

d3.js 基本选择和修改

闾丘谦
2023-03-14
本文向大家介绍d3.js 基本选择和修改,包括了d3.js 基本选择和修改的使用技巧和注意事项,需要的朋友参考一下

示例

如果您熟悉jQuery和Sizzle语法,则d3选择应该不会有太大不同。d3模仿W3C Selectors API,使与元素的交互更加容易。

作为一个基本示例,请选择全部<p>并对其进行更改:

d3.selectAll('p')
  .attr('class','textClass') 
  .style('color', 'white');

简而言之,这与jQuery中的相对相同

$('p')
  .attr('class','textClass') 
  .css('color, 'white')

通常,您将对容器div进行一次选择,以添加一个SVG元素,该元素将分配给变量(通常称为svg)。

var svg = d3.select('#divID').append('svg');

从这里我们可以调用对svg多个对象进行子选择(即使它们尚不存在)。

svg.selectAll('path')
           

 类似资料:
  • 本文向大家介绍d3.js 在选择上附加基本事件,包括了d3.js 在选择上附加基本事件的使用技巧和注意事项,需要的朋友参考一下 示例 通常,您将需要为对象创建事件。 此示例将鼠标spanOver悬停在具有ID的div内的跨度上时添加类,divID并在鼠标退出跨度时将其删除。 默认情况下,d3将传递当前跨度和索引的原点。this上下文也是当前对象,这非常方便,因此我们可以对其进行操作,例如添加或删除

  • 本文向大家介绍d3.js 不同的选择器,包括了d3.js 不同的选择器的使用技巧和注意事项,需要的朋友参考一下 示例 您可以使用不同的选择器选择元素: 按标签: "div" 按类别: ".class" 依编号: "#id" 按属性: "[color=blue]" 多个选择器(OR): "div1, div2, class1" 多个选择器(AND): "div1 div2 class1"

  • Git 允许你通过几种方法来指明特定的或者一定范围内的提交。 了解它们并不是必需的,但是了解一下总没坏处。 单个修订版本 你可以通过 Git 给出的 SHA-1 值来获取一次提交,不过还有很多更人性化的方式来做同样的事情。 本节将会介绍获取单个提交的多种方法。 简短的 SHA-1 Git 十分智能,你只需要提供 SHA-1 的前几个字符就可以获得对应的那次提交,当然你提供的 SHA-1 字符数量不

  • Chrome不使用D3.js选择。在下面的代码中,所有选择都是空的。 如果将替换为,就可以了。

  • D3 代表 Data-Driven Documents 。D3.js 是一个用于根据数据操作文档的 JavaScript 库。D3.js 是一个动态的,交互式的在线数据可视化框架,用于大量网站。

  • D3(Data-Driven Documents 或 D3.js)是一个 JavaScript 库,用于使用 Web 标准将数据可视化。D3 帮助你使用SVG、 Canvas 和 HTML 将数据变为现实。D3 将强大的可视化和交互技术与数据驱动的DOM操作方法相结合,让你拥有现代浏览器的全部功能,并可以自由地为您的数据设计合适的可视化界面。