首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在.data()上,在d3中将'rect‘元素添加到空白svg画布失败

在d3中,使用.data()方法可以将数据绑定到选择集上。然后,使用.enter()方法可以获取数据中尚未与元素绑定的部分,并使用.append()方法添加相应的元素。

在给定的问答内容中,问题是在空白的SVG画布上使用.data()方法将'rect'元素添加失败。可能的原因有以下几点:

  1. 数据未正确绑定:在使用.data()方法时,需要确保数据正确地绑定到选择集上。可以通过在.data()方法中传递数据数组来实现,例如.data(dataArray)
  2. 选择集未正确选择:在使用.data()方法之前,需要先选择要绑定数据的元素。可以使用.selectAll()方法选择所有符合条件的元素,例如.selectAll('rect')
  3. 缺少.enter()方法:在使用.data()方法后,需要使用.enter()方法获取数据中尚未与元素绑定的部分。然后,可以使用.append()方法添加相应的元素,例如.enter().append('rect')

综上所述,可以尝试以下代码来解决问题:

代码语言:txt
复制
// 假设已经有一个空白的SVG画布
var svg = d3.select('svg');

// 假设有一个包含数据的数组
var dataArray = [1, 2, 3, 4, 5];

// 选择要绑定数据的元素
var rects = svg.selectAll('rect')
  .data(dataArray);

// 获取数据中尚未与元素绑定的部分,并添加'rect'元素
rects.enter()
  .append('rect')
  .attr('x', function(d, i) { return i * 20; })
  .attr('y', 0)
  .attr('width', 10)
  .attr('height', 10)
  .attr('fill', 'blue');

这段代码将根据数据数组在空白的SVG画布上添加'rect'元素,并设置其位置、大小和填充颜色。你可以根据实际需求进行修改。

腾讯云相关产品和产品介绍链接地址:

请注意,以上链接仅供参考,具体产品选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【D3.js - v5.x】(2)绘图 | 比例尺 | 坐标轴 | 柱状图 | 过渡

使用 D3 body 元素中添加 svg 的代码如下: var width = 300; //画布的宽度 var height = 300; //画布的高度 var svg = d3.select.../设定宽度 .attr("height", height); //设定高度 有了画布,接下来就可以画布作图了。... SVG 中,矩形的元素标签是 rect。例如: 上面的 rect 里没有矩形的属性。...**坐标轴 SVG 中是没有现成的图形元素的,**需要用其他的元素组合构成。 D3 提供了坐标轴的组件,如此 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。...SVG 中添加坐标轴 定义了坐标轴之后,只需要在 SVG 中添加一个分组元素 ,再将坐标轴的其他元素添加到这个 里即可。

50220

JavaScript d3使用指南

可以自己html中试一试这一段代码(仔细看,我是直接引用了网络d3库,所以在网上都可以正常运行) 3....data() : 把一个数组绑定到一个选择的对象,进行 一一对应。 datum() : 把一个数据绑定到 所有选择集 。...插入元素 d3提供了两种插入函数: append() : 选择集尾部插入元素 insert() : 选择集头部插入元素 甘雨 诺艾尔 <p...制作简单的图表 首先我们需要明确一下制作图标的思路: 生成svg画布 使用d3中的rect元素svg进行赋值,即各类参数 完成赋值之前,需要我们自己去设计数据,让d3进行数据转化,从而赋值给svg。...") .data(dataset)//选中所有的rect对象进行操作 .enter()//由于都是新生成的,所以当然要用enter()了,这是一节内容。

1.7K40

D3.js库-7-坐标轴的使用

D3中是没有现成的坐标轴,SVG中因而没有现成的图形元素,需要通过D3提供的其他组件来手动添加。下图是添加了坐标轴之后的效果图。 ? ?...坐标轴构成 SVG画布的预定义元素中,有6种基本的图形: 矩形 圆形 椭圆 线段 折线 多边形 还有一种特殊的元素就是:路径path 几乎画布中的所有图形都是由以上7种元素构成的。...--坐标轴的轴线--> 分组元素SVG画布中的元素,意思就是group,是将其他元素进行组合和分组存放。...D3中提供了一个组件能够自动添加:d3.svg.axis() 每个分组g看做是一个刻度值和线段组成的group。 定义一个坐标轴 定义一个坐标轴需要使用上一篇文章中使用的比例尺。...g.selectAll("rect") // 选择所有的矩形元素并绑定数据 .data(dataset) .enter()

3.2K10

AngularJS in Action读书笔记5(实战篇)——directive中引入D3饼状图显示

项目的代码我已经托管Github:angelloExtend 一、使用D3.js   以前做可视化的时候,研究过Gephi和Prefuse,但是D3.js的大名如雷贯耳。...var height = 300; //画布的高度 var svg = d3.select("body") //选择文档中的body元素 .append("svg") //添加一个...svg元素 .attr("width", width) //设定宽度 .attr("height", height); //设定高度 var dataset = [ 250 ,...210 , 170 , 130 , 90 ]; var rectHeight = 25; //每个矩形所占的像素高度(包括空白) svg.selectAll("rect") .data...我们需要将负责显示d3的业务逻辑放到它该存在的地方。   当时我想到了指令。页面中通过Attribute、Element、Class等任意一种形式定义一个指令,然后指令完成需要的代码逻辑。

2.2K60

《使用D3设计交互式图表》简读笔记|可视化系列31

SVG(Scalable Vector Graphics,可伸缩矢量图形)是一种基于XML标签来表示图形的文本。SVG 元素可以理解为能在上面绘制各种形状的画布。... SVG的预定义元素里,有6种基本元素rect(矩形...元素添加与数据绑定 从前面的代码框架及D3可视化基本步骤可以看出,用D3将数据变成图形首先需要选定元素并添加SVG元素(如果html代码已经有了需要的元素则只需选定该SVG元素)。...我们选择了需要操作的svg元素后,需要添加rect(矩形)等图形,用append()方法添加元素,insert()方法在所选元素前添加一个元素。用remove()方法DOM中删除元素。...实际d3提供了绘制坐标轴的接口,省去了很多工作量。D3的v5版本中,通过d3.axisBottom(scale)绘制x轴(水平方向)、d3.axisLeft(scale)绘制y坐标轴。

3.7K20

「数据可视化库王者」D3.js 极速上手到Vue应用

前言 D3近年来一直是 JavaScript最重要的数据可视化库之一,创建者 MikeBostock的维护下,前景依然无量,至少现在没有能打的: D3与众多其他库的区别在于无限定制的能力(直接操作 SVG...用于数据可视化的 D3,其核心在于使用绘图指令装饰数据,从源数据创建新的可绘制数据,生成 SVG路径以及从数据和方法 DOM中创建数据可视化元素(如轴)的功能。 ?...你需要学习的第一件事是如何使用D3.js选择和操作DOM元素。该库操作DOM方面实际非常强大,因此理论可以将其用作 jQuery的替代品。以下代码请逐行添加运行。...://www.w3school.com.cn/svg/svg_rect.asp let barChart = svg.selectAll("rect") .data(dataset) //绑定数组...在这里面,你会创建 , 和 元素 let svgWidth = 600, svgHeight = 500; let svg = d3.select("svg")

7.8K30

使用JavaScript和D3.js实现数据可视化

尽管你将使用CSS来进行D3的样式设定,但值得注意的是,很多在HTML使用的标准的CSSSVG的使用方式会不一样-也就是说,你会用stroke,而不是border,使用fill而不是color。...D3中,我们用d3.select来让浏览器搜索元素。 我们可以使用d3.select("body").append("svg");执行此操作。...使用D3,您必须首先选择您要处理的元素。 我们配合这个矩形用.data(dataArray)阵列存储dataArray的数据。...例如,您可以利用SVG元素SVG元素组合在一起,从而允许您在更少的代码行中修改文本和矩形。 您还可以通过不同方式访问数据。...结论 本教程通过JavaScriptD3库中创建条形图。您可以通过访问GitHubD3 API来了解有关d3.js的更多信息。更多前端教程请前往腾讯云+社区学习更多知识。

21.7K30

「数据可视化库王者」D3.js 极速上手到Vue应用

前言 D3近年来一直是 JavaScript最重要的数据可视化库之一,创建者 MikeBostock的维护下,前景依然无量,至少现在没有能打的: D3与众多其他库的区别在于无限定制的能力(直接操作 SVG...用于数据可视化的 D3,其核心在于使用绘图指令装饰数据,从源数据创建新的可绘制数据,生成 SVG路径以及从数据和方法 DOM中创建数据可视化元素(如轴)的功能。 ?...你需要学习的第一件事是如何使用D3.js选择和操作DOM元素。该库操作DOM方面实际非常强大,因此理论可以将其用作 jQuery的替代品。以下代码请逐行添加运行。...://www.w3school.com.cn/svg/svg_rect.asp let barChart = svg.selectAll("rect") .data(dataset) //绑定数组...在这里面,你会创建 , 和 元素 let svgWidth = 600, svgHeight = 500; let svg = d3.select("svg")

8.4K10

手把手带你上手D3.js数据可视化系列(三)手把手带你上手D3.js数据可视化系列(三)

const dataset = d3.range(30) 现在大家对画布绘制元素应该不陌生了,那么古柳就继续讲解下如何读取真实数据集、对数据进行相应处理、基于数据绘制元素、将类别属性映射成对应颜色,...添加完 SVG 画布后,通过给 SVG 添加一个 g 元素,即 group,然后将其水平向右和垂直向下平移相应像素,这样后续 g 里绘制的元素其坐标原点就是图中框选区域的左上角开始,而不是画布的左上角开始...注意这里是已经水平垂直整体平移过的 bounds 元素里添加而不是 svg 里添加;并且先添加了一个组 g,以便和其他区域区分开。...绑定的数据可以多种格式 这里古柳觉得可能需要单独再讲下,绑定到元素或者说是 D3 选择集 selection 的数组数据可以是多种格式的,只需要记得 .attr() 里设置属性或 .style() 里设置样式....selectAll('rect') .data(dataset) .attr('x', (d, i) => d * 10) 比如数组里每一项是数字的,d 就是数字;数组是嵌套数组,每一项元素也是数组的

2.3K20

手把手带你上手D3.js数据可视化系列(二)手把手带你上手D3.js数据可视化系列(二)

(一) - 牛衣古柳 2021.07.30」里古柳介绍了如何添加并设置 SVG 画布、添加矩形元素、根据数据集来添加多个矩形元素、运用取余取整操作调整布局并换行显示等内容。...但有时候画布宽高并不是手动设置的,而是通过 getBoundingClientRect() 获取元素的宽高后进行指定,类似这样的方式 containerWidth = svg.getBoundingClientRect...;接着容器宽度除以单个矩形整体宽度,并向下取整,就是每行最后矩形个数 columnNum;最后绘制矩形同样用这三个步骤 svg.selectAll('rect').data(dataset).join(...'rect'),并且采用取余取整操作,计算出每个矩形的x/y坐标值,和一票最后调整布局换行显示的都类似,应该无需过多解释了。...('rect') .data(dataset) .join('rect') .attr('x', d => rectTotalMargin + d % columnNum * rectTotalWidth

3K10

D3动画

General Update Pattern D3的数据驱动模式如上图所示,当使用d3.data()将数据Array与DOM元素绑定的时,数据与元素之间有着三个阶段,即 Enter 已有数据,但页面还未有与之对应的...,完全等价于 svg.selectAll("circle") .data(data) .join( enter => enter.append("circle"), update...Pattern中的key 当使用d3.data()绑定数据和dom时,相对应的关系,可能第一个元素对应第一个dom,第二元素对应第二dom等; 但当Array发生变化时,比如重新排序、插入等操作,这时候...完整代码 Transition 好了,前面铺垫了这么多,终于到了主角d3.transition了,但实际,与之相关API屈指可数,想要让d3画出带交互和炫酷过渡效果的,重点还是对Update Pattern...比如现在画布上有一个方块,该元素rect,我想要使其位置从默认的地方,到30位置,并加上动画,代码为 rect.transition() .attr('x', 30) // 设置新位置 效果如下

81420
领券