d3选择.attr('x1')返回r.getAttribute不是函数 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

D3.js学习笔记【暂完，待续】

svg.append("line") .attr("x1","129") .attr("x2","45") .attr("y1","300") .attr("y2","100") .attr("stroke...d3 - layouts Hierarchical layouts 使用的数据： let data = { "name": "A1", "children": [...treeLayout.size([400, 200]); //随后我们可以调用treeLayout函数，传入我们的hierarchy object root: treeLayout(root...('x1', function (d) { return d.source.x; }) .attr('y1', function (d) {...var myScale = d3.scaleLinear() .domain([0, 10]) .range([0, 600]); d3将创建一个myScale函数用于接收[0,10]之间的数据输入

5.4K0 0

一根飞线的故事-SVG篇

SVGPathElement.getPointAtLength 调用该方法会根据传入到起点的距离值来计算返回对应的path元素坐标点的位置x、y值。...换一个思路来想，我们是不是可以把这根生成的飞线看做成上面的一个rect元素？...首先我们知道D3拥有attrTween这个属性过渡方法，我们可以在其中返回插值函数，根据传入的进度值不断变化元素的属性，呈现过渡动画效果。...const x = (1 - t) * x1 + t * x2 const y = (1 - t) * y1 + t * y2 mCircle.attr('cx', x) .attr('...怎么样，现在证件照的样子是不是可以勉强拿去相亲了？

9032 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

D3中是没有现成的坐标轴，SVG中因而没有现成的图形元素，需要通过D3提供的其他组件来手动添加。下图是添加了坐标轴之后的效果图。 ? ?...上述元素中没有坐标轴，采用类似的定义方式：将axis看做是一个标签，x1、x2等看做是它的一个个属性 x1="" x2="">......D3中提供了一个组件能够自动添加：d3.svg.axis() 每个分组g看做是一个刻度值和线段组成的group。定义一个坐标轴定义一个坐标轴需要使用上一篇文章中使用的比例尺。...transform","translate(" + 30 + (dataset.length * rectHeight) + ")") // 设置位置信息 .call(axis) // 定义的比例尺本身就是函数.../ 定义每个矩形的像素 var rectHeight = 25; // 每个g元素的属性进行设置 g.selectAll("rect") // 选择所有的矩形元素并绑定数据

3.3K1 0

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

"); 过程比较简单，就是返回文本，计算x/y坐标，并填充颜色。...5. scales: 比例尺函数 D3中有个重要的概念就是比例尺。比例尺就是把一组输入域映射到输出域的函数。映射就是两个数据集之间元素相互对应的关系。...D3中有各种比例尺函数，有连续性的，有非连续性的，在本例子中，你将学到 d3.scaleLinear() ，线性比例尺。...("line") .attr("x1", 100) .attr("x2", 500) .attr("y1", 50) .attr("y2", 50) .attr(...Vue中使用 D3.js的正确姿势我们将使用 D3和 Vue构建一个基本的柱状图组件。网上有一堆例子，但我们将专注于写 Vue，而不是滥用D3。 1. 安装依赖首先，我们需要为项目安装依赖项。

7.9K3 0

数据可视化工具d3_前端3d可视化

选择集在 D3 中，用于选择元素的函数有两个，这两个函数返回的结果称为选择集。...SWUSTVIS").attr("font-size","12px"); 绑定数据选择集和绑定数据通常是一起使用的，D3 中是通过以下两个函数来绑定数据的： datum()：绑定一个数据到选择集上...第6章比例尺的使用比例尺是 D3 中很重要的一个概念，上一章里曾经提到过直接用数值的大小来代表像素不是一种好方法，本章正是要解决此问题。...在 D3 中，每一个选择集都有 on() 函数，用于添加事件监听器。 on() 的第一个参数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函数。...要注意，text() 里返回的是 d.data ，而不是 d 。

12.9K4 0

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

"); 过程比较简单，就是返回文本，计算x/y坐标，并填充颜色。...5. scales: 比例尺函数 D3中有个重要的概念就是比例尺。比例尺就是把一组输入域映射到输出域的函数。映射就是两个数据集之间元素相互对应的关系。...D3中有各种比例尺函数，有连续性的，有非连续性的，在本例子中，你将学到 d3.scaleLinear() ，线性比例尺。...("line") .attr("x1", 100) .attr("x2", 500) .attr("y1", 50) .attr("y2", 50) .attr(...Vue中使用 D3.js的正确姿势我们将使用 D3和 Vue构建一个基本的柱状图组件。网上有一堆例子，但我们将专注于写 Vue，而不是滥用D3。 1. 安装依赖首先，我们需要为项目安装依赖项。

8.8K1 0

D3动画

D3的数据驱动特性的核心和实现就是依靠这个Pattern，而动画和交互自然要从它说起了。并不是所有图形都必须遵循Update Pattern，比如一次性绘图，无交互的静态图形等。...') // text 本身是update部分 text.exit().remove() // exit() 返回数据已经被删除，但是还存在dom的元素 } V5 d3 V5.8.0 引入了一个新的...基本动画使用 transition 的使用，与jquery十分类似，使用时，只需要对选择的元素调用，并指定修改的属性即可，即selection.transition().attr(...)...，是要修改的内容或属性，功能类似transition().attr()里，attr的内容；第二个参数是返回的插值函数，可以使用d3提供的一些插值函数，当然也可以自定义插值函数。...接下来说下自定义函数，比如仍然是红色变为蓝色，我们可以在插值函数返回自己定义的函数func(t), 该函数会在动画时间内不断的运行，t为[0, 1]，借助这个思路，以上的效果可以用自定义函数实现如下:

8822 0

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

尽管你将使用CSS来进行D3的样式设定，但值得注意的是，很多在HTML上使用的标准的CSS在SVG的使用方式会不一样-也就是说，你会用stroke，而不是border，使用fill而不是color。...如果浏览器找到矩形，它将在选择中返回它们，如果它是空的，它将返回空。使用D3，您必须首先选择您要处理的元素。我们配合这个矩形用.data(dataArray)阵列存储在dataArray的数据。...目前，该行代码如下所示： .attr("x","25") 我们将用一个函数替换25像素的数字。我们将传递由D3定义的两个变量function()，代表数据点和索引。...我们现在将使用该height属性，并将添加一个类似于我们添加到x属性中的函数。让我们通过传递变量开始d和i到function，并返回d。d代表数据点。...值得注意的是，因为这是SVG而不是图像，所以您可以选择文本，就像在页面上看到的任何其他文本一样。从这里开始，您可以通过修改函数公式来重新定位数字。

21.9K3 0

05-Nebula Graph 图数据可视化

/ 2) .attr('y', 20) .text('人物关系图') function ticked() { // 力导向图变化函数，让力学图不断更新...link .attr('x1', function(d) { return d.source.x }) .attr('y1', function...p的, 但是居然直接报错了 Nebula自身提供的Jar包解析不了, 自己的返回结果, 当时差点绝望了, 还不底层的调用全部都封装了起来......最重只能在语法上进行处理, 通过两个函数和管道符循环,来完成, 但是会吧节点和关系拆开, 拆成两个列.., 不过也算是能返回结果了然后在程序里面处理, 转为D3需要的数据结构导入需要的模型类 package...的图可视化完成, 当然了, 样式不是很好看, 前端大佬自行美化吧~

7652 1

使用D3.JS进行坐标轴绘制和图绘制

前面已经说过D3的功能十分强大，但是往往实际使用时只需要用到一部分内容，在这里，就只用到了比例尺和布局两部分，外加核心的请求部分（请求数据），分别用来绘制Graph的显示坐标轴和图的顶点及边...另外需要注意的是，这里不要直接返回源数据坐标，要带入到上述定义的比例尺中。....attr('y', 30) .attr('class', 'title') .text('这是一个用d3画的简略坐标轴'); // 画点，即绘制图的顶点 svg.selectAll...(d) { return xScale(d.cx); // 使用比例尺返回合适的变换 }) .attr('cy', function(d) { return yScale...('x1',function(d){ return xScale(d.x1); }) .attr('y1',function(d){ return yScale(d.y1); }

6.5K3 0

D3比例尺与坐标轴

连续比例尺有以下几种通用方法： continuousScale(x)：向比例尺函数中传入一个定义域内的值，返回在值域内对应的值。...如果 range 不是数值类型则返回 NaN。...应用nice()方法后，定义域会变成比较工整的形式，但不是四舍五入。 continuousScale.ticks( [count] )：默认返回一个近似的用来表示比例尺定义域的数组。...它的输入被强制转为日期类型而不是数值类型，并且invert返回的也是date类型。时间比例尺基于日历间隔来实现ticks。...Math.round() 函数返回一个数字四舍五入后最接近的整数。

3K1 0

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

enter() //指定选择集的enter部分 .append("rect") //添加足够数量的矩形元素这段代码以后会常常出现在 D3 的代码中，请务必牢记。...在这里还用到了两个函数，它们经常与比例尺一起出现： d3.max() d3.min() 这两个函数能够求数组的最大值和最小值，是 D3 提供的。...返回 175，这是按照线性函数的规则计算的。有一点请大家记住： d3.scale.linear() 的返回值，是可以当做函数来使用的。因此，才有这样的用法：linear(0.9)。...代码如下： svg.append("g") .call(axis); 上面有一个 call() 函数，其参数是前面定义的坐标轴 axis。在 D3 中，call() 的参数是一个函数。...调用之后，将当前的选择集作为参数传递给此函数。也就是说，以下两段代码是相等的。

7642 0

D3库实践笔记之几类特定图表与布局 |可视化系列37

得到的数据序列arcs绘制的饼图是经过排序的，饼图效果是从12点钟开始第一个楔形，顺时针从大到小排列，从上图也可看出，数据的索引没变，arcs[0]还是76，但起始角度为0的数据是90，因此可以重写一下pie函数...实际中使用排序还是没排序的效果根据需求选择。innerRadius设置为0是饼图，当其大于0可以得到环状图。...20, bottom: 30, left: 40}); var x = d3.scaleLinear() .domain([bins[0].x0, bins[bins.length - 1].x1...("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x)...在d3的v3.x版本里，饼图、直方图等数据转换函数汇总在layout下。通过d3.layout.pie()使用，而v5.x之后的版本没有了layout的集合，而是使用d3.pie()(data)。

2K2 0

基于 Vue，使用 D3.js 画一个疫情趋势折线图

因为视觉本身不是执行复杂的计算，而是帮助人脑更快地感知信息。此外，与充满数字的电子表格相比，它们看起来也更有趣。在本文中，我们将使用 D3.js 和 Vue.js 创建折线图，并勾画一个疫情趋势。...然后，我们使用 d3.select() 方法选择了我们之前定义的 SVG 元素，并将其存储为一个名为 svg 的常量。此方法将选择 DOM 中匹配的第一个元素。...接下来，我们使用 D3 的 attr() 方法将宽度和高度属性添加到 svg，然后将 g（SVG 元素）附加到 svg。SVG 元素是用于对其他 SVG 元素进行分组的容器。...return x(parseTime(d.date)); }) .y(function (d) { return y(d.amount); }); 在这里，我们通过传入匿名函数并返回日期对象和每个日期对应的数量来定义行的...", 1.5) .attr("d", line); }, }; 结尾 D3 是一个庞大的库，尽管我们涵盖了很多内容，但这只是基础知识。

3.6K6 0

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

D3库的功能和特点： •将数据和DOM绑定在一起、图形随着数据变化；•数据转换和绘制独立；不是提供Pie()这类函数绘图而是将数据转换成饼图数据，再按需绘图。...d3的select()方法传入一个 CSS 选择符，返回DOM 中匹配的第一个元素的引用。...典型用法如下： •d3.select("body") ; //选择body元素；• d3.select("#apple"); //选择id为apple的元素；例如会匹配上p01...通过data(vals[,key])绑定数组vals中的每一项到选中的元素，key是一个用于指定绑定规则的函数。...D3 提供了比例尺函数生成器。

3.8K2 0

【实战】基于 Vue，使用 D3.js 画一个疫情趋势折线图

因为视觉本身不是执行复杂的计算，而是帮助人脑更快地感知信息。此外，与充满数字的电子表格相比，它们看起来也更有趣。...然后，我们使用 d3.select() 方法选择了我们之前定义的 SVG 元素，并将其存储为一个名为 svg 的常量。此方法将选择 DOM 中匹配的第一个元素。...接下来，我们使用 D3 的 attr() 方法将宽度和高度属性添加到 svg，然后将 g（SVG 元素）附加到 svg。 SVG 元素是用于对其他 SVG 元素进行分组的容器。...return x(parseTime(d.date)); }) .y(function (d) { return y(d.amount); }); 在这里，我们通过传入匿名函数并返回日期对象和每个日期对应的数量来定义行的...", 1.5) .attr("d", line); }, }; 结尾 D3 是一个庞大的库，尽管我们涵盖了很多内容，但这只是基础知识。

5862 0

D3.js仪表盘的实现

("y", 40) //到中心的距离 .text("%"); D3制作的SVG图，与Echarts绘制的Canvas比起来，很重要的一个优点是，可以用CSS定义SVG的样式。...("d", arc); 在圆弧末尾添加一个指针标记 var tick = g.append("line") .attr('class', 'gauge-tick') .attr("x1"...transition.attrTween：https://github.com/d3/d3-transition/blob/master/README.md#transition_attrTween...它返回一个d属性的补间（渐变）动画方法，使一个圆弧从当前的角度渐变到另一个新的角度。...d.endAngle = interpolate(t); //根据 transition 的时间 t 计算插值并赋值给endAngle return arc(d); //返回新的

7.6K2 0

D3常用API说明，含代码示例

选择元素 d3中选择元素的API有两个：select()方法和selectAll()方法。...①.查看选择集元素的状态查看选择集的状态，有三个函数可用： selection.empty()：如果选择集为空，则返回true，非空返回false； selection.node()：返回第一个非空元素...d3中设置和获取选择集属性的API函数共有六个： selection.attr( name[, value] )：设置或获取选择集元素的属性，name是属性名，value是属性值，如果省略value，...如果需求要不按索引号绑定，可以使用data()方法的第二个参数，即键函数。注意，只有在选择集原来已有绑定数据的前提下，使用键函数才生效。选择集的处理之前讲过d3对数据绑定的操作。...d3默认使用d3.ascending(递增)顺序排列。可以向sort()中传入一个匿名函数参数，来对选择集重新选择。

4.4K4 0

【D3使用教程】(6) 交互操作之事件监听

.on("mouseover",function(d){ d3.select(this) //在传给任何D3方法的匿名函数中，如果想操作当前元素，只要引用this就行 .transition...sortBars()，然后利用D3提供的sort()函数进行排序。...sortOrder; // 选择所有rect元素，使用D3提供的sort()方法，排序依据是绑定到它们的数据值 svg.selectAll("rect") .sort...("width",w).attr("height",h);//把append()返回的新元素保存在了变量svg中 let dataset = [5,10,6,3,25]; svg.selectAll...sortOrder; // 选择所有rect元素，使用D3提供的sort()方法，排序依据是绑定到它们的数据值 svg.selectAll("rect")

3671 0

C++学习之路——函数重载和运算符重载

当您调用一个重载函数或重载运算符时，编译器通过把您所使用的参数类型与定义中的参数类型进行比较，决定选用最合适的定义。选择最合适的重载函数或重载运算符的过程，称为重载决策。...C++中的函数重载在同一个作用域内，可以声明几个功能类似的同名函数，但是这些同名函数的形式参数（指参数的个数、类型或者顺序）必须不同。您不能仅通过返回类型的不同来重载函数。...与其他函数一样，重载运算符有一个返回类型和一个参数列表。 Box operator + (const Box &); 声明加法运算符用于把两个 Box 对象相加，返回最终的 Box 对象。...; x1 = a / m.a; return x1; } //class C //{ //public: // string ss; // C(string s) // {ss = s;...; d3 = d1 * d2; cout d3的值为" d3 << endl; return 0; } 结果为：发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn

4262 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭