d3.select('body').append('svg').attr('width', 200).attr('height', 200)这段代码中.attr()添加的元素为什么作用于svg上而不是...

于 2022-12-31 19:38:25 发布
阅读量126 收藏
点赞数
文章标签： css 前端 html css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42613017/article/details/129535763
版权

在这段代码中，.attr() 方法是作用于 svg 上的，而不是 body 上的。这是因为在代码中，通过使用 d3.select(body).append(svg) 先选择了 body 元素，然后调用 .append(svg) 方法将一个新的 svg 元素添加到了 body 中，并将其赋值给了变量 svg。然后，.attr() 方法是作用于这个新创建的 svg 元素上的，设置了它的 width 和 height 属性。

因此，总的来看，这段代码的作用是在 body 元素中添加一个新的 svg 元素，并设置了这个 svg 元素的

weixin_42613017
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在控制台输出d3.select(body).append(svg)
weixin_35749796的博客
12-31 178
在控制台输出 d3.select(body).append(svg) 意味着你想在 HTML 文档中的 body 元素后面添加一个 svg 元素。 d3.select() 是 D3.js 中的一个方法，它允许你使用 CSS 选择器来选择文档中的元素。 例如，在本例中，d3.select(body) 会选择文档中的 body 元素。 .append() 是 D3.js 中的另一个方法，它允许你向选择...
如何动态向HTML中插入SVG元素(包括Line,path,marker..等)
junzhen_chen的博客
04-19 8138
1.使用dodument对象创建一个SVG元素marker，为元素引入svg的命名空间（必需引入命名空间，不然浏览器将此元素当做普通html标签插入文档流） var marker = document.createElementNS("http://www.w3.org/2000/svg","marker"); 2. 使用标签元素对象的setAttribute函数为元素的属性设值
D3js-绘制SVG
六月心悸
06-09 7206
现在，我们已经熟悉了SVG图像的基本结构和元素，那么，应该怎样用数据生成图形呢？ 你可能已经注意到，SVG元素的所有属性都是标签内属性的形式。即，它们在标签内表示为属性/值的二元组，比如 property="value"/> 看起来非常像HTML吧！ class="eureka"> 之前，我们已经用了D3的常用方法append()和attr()来生成新的H
D3.js（一）：select、selectAll、数据绑定、求值、数据操作、基础柱状图
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
09-16 1559
选择集 、、、、、、 添加 、插入 、删除 数据绑定 排序 、、 求值 操作数组 模板 基础柱状图
使用D3.js创建物流地图的示例代码
10-18
var svg = d3.select("body div.fxmap") .append("svg") .attr("width", width) .attr("height", height) .style("background", "#000"); var gmap = svg.append("g").attr("id", "map"); var mline = svg....
利用d3.js制作连线动画图与编辑器
10-16
var svg = d3.select('body').append('svg') .attr('width', 500) .attr('height', 500); // 创建线段 var line = d3.line() .x(function(d) { return d.x; }) .y(function(d) { return d.y; }); // 添加动画...
D3.js实现文本的换行详解
10-21
在D3.js中，当你需要在SVG中展示长文本并希望它能自动换行时，会发现`<text>`元素默认并不支持这一功能。本文将详细介绍如何利用D3.js实现SVG文本的换行。 首先，我们需要理解问题的核心所在。假设我们有一段长文本...
使用D3.js库绘制曲线图
04-11
在这个过程中，开发者会使用D3的`d3.xml()`方法来加载XML文件，然后通过`d3.selectAll()`和`data()`绑定数据到SVG元素上，最后使用`enter()`, `append()`, 和`attr()`等方法来创建和配置曲线图的各个部分，如线条、...
使用D3.js制作图表详解
10-19
D3.js提供了多种选择器，如`d3.select()`和`d3.selectAll()`，用于选取DOM中的特定元素。`d3.select()`选取第一个匹配的元素，而`selectAll()`则选取所有匹配的元素。此外，`append()`方法用于向选定的元素后面添加...
D3.js实现动态生成svg内容
爱的叹息的专栏
06-01 1086
D3.js - Introduction to SVG_学习D3JS|WIKI教程 SVG是一种基于XML的矢量图形格式。.SVG应该具有相对于原点（0,0）的绝对位置。.Step 1 - 创建SVG图像并将宽度设置为300像素，高度设置为300像素。.这里， svg标签启动SVG图像，它具有宽度和高度作为属性。. style属性使用stroke和stroke-width样式设置线条的颜色和粗细。https://iowiki.com/d3js/d3js_introduction_to_svg.html
HTML5学习之路--js动态添加svg节点
热门推荐
小小程序猿
12-31 1万+
下面贴上完整代码。要注意一点：创建svg节点时，要使用createElementNS函数并传入节点名称的命名空间。否则创建出来的节点默认为html dom而不是svg dom。这样的话，将其append到svg节点下时，不会显示。 无标题文档 function onLoad(){ var mysvg = document.getElementById("svg_my");
d3选择集合的操作方法(五):insert与append
甘焕的博客
08-04 1万+
insert与append是d3中用于新增元素的方法，它们的用法完全相同，作用也完全相同，唯一的差别在于insert可以指定将新元素插入在什么位置，而append只能将元素添加在末尾。      insert与append的作用过程可分为两步来理解，第一步是新增元素，第二步是选择新增元素，也就是说insert、append操作返回的结果都是新增的元素。      在对页面上已存在的html元素，in
d3选择集合的操作方法(一):select与selectAll
甘焕的博客
08-03 1万+
select与selectAll返回的结果都是d3的选择集合，并且都能进行集合运算，唯一不同的是集合的数量，select的数量恒小于等于1，并且总是返回第一个元素(如果存在的话)，最令人惊讶的是，select还难以建立集合的父子关系；而selectAll则是选择的所有元素。       假定文档中现有的dom元素如下所示：<body> <ul id="user-list">
使用 appendChild 添加 SVG 元素不生效
张景源的博客
07-23 1275
在使用 SVG 时，需要使用 appendChild 来添加元素。但是如下的写法是不生效的： let newElement = document.createElement('rect'); newElement.setAttribute('fill','orange'); newElement.setAttribute('width','200'); newElement.setAttribute('height','200'); document.getElementById('svg-drawing
d3.js学习3----选择、插入、删除元素
Pitter_Patter_Bee的专栏
10-19 3682
本文介绍在 D3 中选择、插入、删除元素的方法。 1. 选择元素 在【入门 – 第 2.0 章】中，已经讲解了 select 和 selectAll，以及选择集的概念。本节具体讲解这两个函数的用法。 假设在 body 中有三个段落元素： Apple Pear Banana 现在，要分别完成以下四种选择元素的任务。 1.1 选择第一个 p 元素 使用
D3入门教程——选择数据和数据绑定
苏木的小站
08-18 1175
文章目录一、如何选择元素二、如何绑定元素1.datum() 一、如何选择元素 d3.select()：是选择所有指定元素的第一个 d3.selectAll()：是选择指定元素的全部 例如： var body = d3.select("body"); //选择文档中的body元素 var p1 = body.select("p"); //选择body中的第一个p元素 var p = ...
D3.js 学习 - 1 - D3基本使用（d3-selection 选择集）
mjzhang1993的博客
07-27 9101
D3.js 学习 - 1 - D3基本使用 （d3-selection 选择集） D3 简介 D3 是一个 Javascript 库，用于创建数据可视化图形，全称 Data-Driven Documents 也就是数据驱动文档，文档指的就是基于 web 的文档，代表可以在浏览器中展示的一切，包括 SVG 以及 一般的 HTML ， D3扮演的是一个驱动程序的角色，联系着数据和文档 ...
D3.js入门 select选择器 元素的插入和删除 dataum和data 动态属性 官网
Joaniee的博客
07-15 546
D3.js入门 select选择器 元素的插入和删除 dataum和data 动态属性 官网 关于D3 官网：https://d3js.org/ 是一个数据可视化的库，技术基础是SVG，兼容性是IE9+，语法上近似jQuery 对比three.js three.js是以webgl为基础的库，封装了一些3D渲染需求中重要的工具与渲染循环 1 导入 2 获取单个节点，标签名的形式 // 获取dom结点，形式是一个groups数组 var body = d3.select(‘body’); console.lo
d3.select('body').append('svg').attr('width', 200).attr('height', 200)这段代码中.attr()添加的元素为什么作用于svg上而不是body上
最新发布
08-26
这段代码 d3.select('body').append('svg').attr('width', 200).attr('height', 200) 的作用是在 body 元素中添加一个 SVG 元素，并为该 SVG 元素设置宽度和高度。 d3.select('body') 的意思是选择文档中的 body ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值