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

属性更改后,图表中的SVG不会重新呈现。React + d3

属性更改后,图表中的SVG不会重新呈现是因为React和d3的工作原理不同导致的。

React是一个用于构建用户界面的JavaScript库,它使用虚拟DOM(Virtual DOM)来管理和更新界面。当组件的状态或属性发生变化时,React会重新计算虚拟DOM树,并与之前的虚拟DOM树进行比较,找出需要更新的部分,然后只更新这些部分的实际DOM。

而d3是一个用于操作数据和创建可视化图表的JavaScript库,它直接操作实际的SVG元素来创建和更新图表。当数据发生变化时,d3会重新计算图表的布局和样式,并直接修改SVG元素的属性和内容。

由于React和d3的更新机制不同,当属性更改后,React并不会触发d3重新渲染图表的操作。这就导致了图表中的SVG不会重新呈现。

解决这个问题的一种方法是使用React和d3的集成库,例如react-d3-library或react-d3-components。这些库提供了将React和d3结合使用的组件和工具,可以更好地管理React组件和d3图表之间的交互和更新。

另一种方法是手动在React组件中监听属性的变化,并在属性变化时手动调用d3的更新方法来重新渲染图表。可以使用React的生命周期方法(如componentDidUpdate)或React的钩子函数(如useEffect)来实现这个功能。

总结起来,要解决属性更改后图表中的SVG不重新呈现的问题,可以使用React和d3的集成库或手动监听属性变化并手动调用d3的更新方法来重新渲染图表。

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

相关·内容

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

D3利用可缩放矢量图形或SVG格式,允许您渲染可放大或缩小形状,线条和填充,而不会降低质量。本教程将指导您使用JavaScript D3库创建条形图。...第一步 - 创建文件和参考D3 让我们首先创建一个目录来保存我们所有的文件。您可以随意调用它,我们将其称为D3项目。创建,进入目录。...由于D3是模块化,您可以通过仅拉入您将使用模块来减小文件大小。 下载D3,让我们设置CSS和HTML文件。您可以选择要在此文件上使用文本编辑器,例如nano。...设置形状属性 我们可以通过使用.attr(),与为SVG定义属性相同方式向形状添加属性D3每个形状将具有不同属性,具体取决于它们定义和绘制方式。...例如,您可能还想更改style.css文件font-size属性。 完成代码和代码改进 此时,您应该拥有一个在JavaScriptD3呈现功能完备条形图。

21.8K30
  • 14个最好 JavaScript 数据可视化库

    基于 SVG 库通常更适合中小型数据集,因为每个元素都是唯一节点并存在于 DOM 树。这也意味着它们允许被直接访问,从而具有更多灵活性。...Recharts 为 React 专用。 Recharts 在使用 D3 作为引擎,并导出了声明性组件。它非常轻巧,可以通过渲染 SVG 元素来创建漂亮交互式图表。它易于使用而且文档完整。...Nivo Nivo 是一个基于 D3React 漂亮框架,提供十四种不同类型组件来呈现数据。...Google Charts 一个非常流行图表Web服务,我根本无法把它从列表删除。...该库自诩为美观可视化,只需很少代码就可以轻松地部署在你产品。 Zoomchatrts 是基于 Canvas ,在相同数据量下,使用默认设置,它速度比基于 SVG 竞争对手快20倍。

    5.9K30

    11个React Native 组件库和 Javascript 数据可视化库

    通过传递一组不同变量,可以很容易地动态更改主题。这里有一个不错 Expo 事例,可看看。 5. React Native Material UI ?...超过 80k star D3.js 可能是最流行和最广泛 Javascript 数据可视化库。D3 用于基于数据操纵文档,并使用 HTML、SVG 和 CSS 实现数据。...Recharts 是一个使用 ReactD3 构建图表库,支持声明式 React 组件方式。该库提供了原生 SVG 支持,轻量级依赖树(D3子模块)通过组件 props 高度可定制。...8k stars C3js 是一个基于 D3 可重复使用图表库,用于Web应用程序。 该库为每个元素提供类,因此你可以通过类定义自定义样式,并通过 D3 直接扩展结构。...它还提供了各种 API 和回调来访问图表状态。 通过使用它们,你甚至可以在渲染更新图表,看看这些例子。 9. React Virtualized + React Vis + Victory ?

    11.7K11

    告别繁琐D3代码:这款可控、可自定义D3图表库,更轻量、更简单!

    C3.js易于使用、可定制,并提供了一个很好 API。它可用于使用 SVG、HTML 和 CSS 创建可视化效果。支持多种图表类型。...通过包装构建整个图表所需代码,可以轻松呈现基于 D3 图表。 C3.js 很容易定制。 C3.js 提供了多种回调来访问图表状态。...通过使用这些 API 和回调,您可以更新图表,即使在呈现图表之后也是如此。 使用C3.js 首选需要安装 c3。 npm i c3 此外,我们还需要 d3,因为 c3 依赖于它。...我们仍然有 bindto 属性,而 data 属性现在包含更多数据和类型。在此示例,axis 属性允许我们自定义 y 轴。以下是此代码生成图表输出。...在这里,我们以图表线型为目标,通过这种简单样式,我们能够自定义线条大小。 自定义轴,比如更改 x 轴和 y 轴颜色 C3.js自定义就要麻烦一些!需要熟练掌握相应属性、样式等。

    13210

    前端开发者常用9个JavaScript图表

    Chartist 库很适合于创建美观、响应能力强、阅读友好图表。Chartist 使用 SVG呈现图表。 Chartist 还提供了使用 CSS 媒体查询和创意动画来自定义图表能力。...使用 Chartist,可以通过 CSS 样式来美化你 SVG,用户完全可以现实自己所想所有图表样式。...FlexChart 本质上是一种交互式图表,不论是数据进行任何更改,都会自动反应在图表上,如图表曲线随数据放大缩小、过滤、钻取、动画等。...NVD3 是由 Mike Bostock 撰写基于 D3 JavaScript 库。NVD3 允许用户在 Web 应用程序创建美观、可复用图表。...ReCharts 是一个使用 React 构建,基于 D3 图表库。 使用 ReCharts,用户可以在 React Web 应用程序无缝地编写图表

    7K30

    前端开发者常用9个JavaScript图表

    Chartist 库很适合于创建美观、响应能力强、阅读友好图表。Chartist 使用 SVG呈现图表。 Chartist 还提供了使用 CSS 媒体查询和创意动画来自定义图表能力。...使用 Chartist,可以通过 CSS 样式来美化你 SVG,用户完全可以现实自己所想所有图表样式。...FlexChart 本质上是一种交互式图表,不论是数据进行任何更改,都会自动反应在图表上,如图表曲线随数据放大缩小、过滤、钻取、动画等。...NVD3 是由 Mike Bostock 撰写基于 D3 JavaScript 库。NVD3 允许用户在 Web 应用程序创建美观、可复用图表。...ReCharts 是一个使用 React 构建,基于 D3 图表库。 使用 ReCharts,用户可以在 React Web 应用程序无缝地编写图表

    7.2K70

    NASA 开源!数据分析与任务控制框架 | 开源日报 No.255

    可用于在桌面和移动设备上可视化数据 由 NASA Ames 研究中心开发,被 NASA 用于太空飞行器任务数据分析、实验漫游器系统规划和操作 作为通用且开源框架,可用作构建任何产生遥测数据系统计划...recharts 是使用 ReactD3 构建重新定义图表库。...使用 React 组件简单部署。 原生 SVG 支持,轻量级,仅依赖于一些 D3 子模块。 声明式组件,图表组件纯粹是呈现性质。 提供文档和示例。...Bitnami 紧密跟踪上游源代码变化,并使用自动化系统及时发布新版本镜像。 最新错误修复和功能可尽快使用。...定期发布最新发行包更新容器镜像。

    18410

    前端开发者常用 9个JavaScript 图表

    Chartist 使用 SVG呈现图表。 Chartist 还提供了使用 CSS 媒体查询和创意动画来自定义图表能力。用户使用 Chartist 在图表设计实现自己所有创意。...FlexChart 本质上是一种交互式图表,不论是数据进行任何更改,都会自动反应在图表上,如图表曲线随数据放大缩小、过滤、钻取、动画等。...D3 图表可视化库。...使用 ReCharts,用户可以在 React Web 应用程序无缝地编写图表。 Recharts 非常轻巧,并使用 SVG 元素来创建很奇特图表。...Flot.js 是 JavaScript 库较为古老图表库之一。尽管如此,Flot.js 也不会因为绘制折线图、饼图、条形图、面积图、甚至堆叠图表而降低其性能。

    8.4K50

    研讨浏览器绘制和Web性能注意事项

    这就是为什么许多Web开发人员倾向于通过使用某种前端框架来部分解决这个问题,比如React,除了许多其他优点之外,它还可以帮助高度优化DOM更改,以避免不必要重新计算或渲染。...上图是页面性能摘要示例,图表是使用DevToolsChrome性能面板生成(稍后将详细介绍),它显示了浏览器每个任务在重新加载页面在记录时间(0-7.12s)花费了多少时间。...在这个特殊例子,增加绘画是由页面上动画GIF和canvas drawing(在60 fps)组合造成,两者都不会导致DOM或其样式任何更改,同时仍然触发绘画。...最明显就是将元素操作限制在csstransform和opacity属性,在默认情况下不会触发画图,除非存在一些特殊情况,例如动画SVG路径。...Layer borders用于显示由浏览器呈现边框,以便于识别任何转换或大小更改。paint flashing用于突出显示浏览器被迫重新绘制网页区域。

    1.2K30

    前端图表可视化应用实践总结

    它是一个使用ReactD3构建Redefined图表库。具备以下特性: 支持React组件,声明式标签,写图表和写 HTML 一样简单。...原生SVG支持,依赖于轻量级 D3 子模块构建 SVG 元素。 接口式 API,解决各种个性化需求。...关于贝塞尔曲线就不再赘述了,其原理和SVGPath贝塞尔曲线使用,可查阅下面两篇文章。...下面代码为:通过D3 shape(可视化图形基元),除了终点,两个控制点x值通过参数设置。将其实例作为props type值传入Recharts ,即可得到想要曲线。...recharts提供基于react组件写法,去写可定制化svg图形。比如下面:用组件svg 来定制Label位置样式。

    72510

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

    每个图形均视为对象,更改对象属性,图形也会改变。要注意,在 SVG ,x 轴正方向是水平向右,y 轴正方向是垂直向下。...在 canvas ,一旦图形被绘制完成,它就不会继续得到浏览器关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖对象。...添加画布 D3 虽然没有明文规定一定要在 SVG 绘图,但是 D3 提供了众多 SVG 图形生成器,它们都是只支持 SVG 。因此,建议使用 SVG 画布。...使用 D3 在 body 元素添加 svg 代码如下。...有时候,图表变化需要缓慢发生,以便于让用户看清楚变化过程。 什么是动态效果 前面几章制作图表是一蹴而就地出现,然后绘制完成不再发生变化,这是静态图表

    12.8K40

    九大数据可视化利器,你有在使用吗?

    可视化信息以易于阅读视觉化内容正在被越来越多的人所青睐。可视化形式呈现信息需求也随之增加,因此近年来涌现出了许多数据可视化工具。...D3 当下谈论数据可视化时,我们是绕不开 D3 ,这是由 Mike Bostock 创建库,它已成为在浏览器处理 SVG 矢量图形主要工具。...使用 SVG 时,无论放大多少倍,图像看起来都不会出现明显像素点。D3 允许创建各种高级图形,如网状图、树状图、地图或气泡图,以及常用图形(如条形图或散布图)。...您可以导出各种格式图形,比如 PNG、JPG、SVG 和 PDF。Highcharts 可免费供个人和非商业目的使用,如用于商业目的,您需要购买许可。您可以在这里看到各种类型图表示例。 ? 6....所有的图形都以 HTML5 形式呈现,默认情况下是响应式,可进行交互。它是一个非常轻量化库,其压缩版本大小只有 11kb。 ? 8.

    3.9K60

    目前最全,可视化数据工具大集合

    数据可视化技术基本思想是将数据库每一个数据项作为单个图元元素表示,大量数据集构成数据图像, 同时将数据各个属性值以多维数据形式表示,可以从不同维度观察数据,从而对数据进行更深入观察和分析。...图表库 C3 – 以 d3 为基础构建可重用图表库 Chart.js – 带有 canvas 标签图表 Chartist.js – 具有强大浏览器兼容能力响应式图表 Dimple – 适用于业务分析面向对象...和VML呈现图表库....和 d3 以及 svg.js 共同发挥作用 Cytoscape.js – 由 Cytoscape 核心开发人员维护用于绘制图形 JavaScript 库....许可瓷砖覆盖式为基础展示和交互地图库 d3 参见 Awesome D3 dc.js dc.js 是一个多维图表构建工具,其能够与 crossfilter 完美地配合工作 angular-dc – dc.js

    3.6K70

    D3 介绍

    动态属性D3 支持这种以 function 方式传入属性,这样属性是动态,每次执行时候再去调用计算获得: d3.selectAll("p").style("color", function()...(Transformation, not Representation):D3 并不是一个新图像呈现类库,因此它和 Raphaël 是不一样。...你可以用 D3 加上自己定义 CSS 来创建 SVG 图案,浏览器未来特性也会被 D3 封装起来给你用,这些事情无非是让你对 DOM 和其上数据操作换了一种形式而已。...当然,直接拿 D3 来绘制图表可能会觉得繁琐,如果使用它扩展就方便多了。...其实,我倒觉得还好,d3 功能比较强大,但是很多人不喜欢主要原因是,这个东西是不符合人类常规思维,它是那种以数据(以及容纳数据容器)为核心代码风格,以这个折线图为例: 如果用 SVG 来实现它的话

    1.3K20

    SVG 菜鸟 Recharts 自定义图表实战

    Recharts 是一款图表处理类库,利用 React 特性,重新定义了图表配置和组合方式,大大地提高了图表自定义样式灵活度。...关于 Recharts Recharts 是一个处理图表类库,re 含义除了 "React" 外,还代表 "Redifined",重新定义图表各元素组合和配置方式。...它基于 ReactD3 构建,具有以下特点: 声明式标签,让写图表和写 HTML 一样简单 贴近原生 SVG 配置项,让配置项更加自然 接口式 API,解决各种个性化需求...参考 官网例子[3],实现 Hover 状态下放大 Sector, 提供了一个 ActiveShape 属性,往里面传入一个自定义 React 组件,重新渲染需要那一份,然后再传入一个... 时 props 各个属性在图形含义,这里用到有: const {  cx, cy, innerRadius, outerRadius, startAngle, endAngle, midAngle

    1.6K20

    干货 | 跨平台 Canvas 绘图引擎背后黑科技

    但是d3有一个缺点,就是虽然它主要功能是处理基于数据文档,其实对如何具体展示并没有特别限定,但是它官方例子多半是使用SVG和DOM实现,而考虑性能和跨平台性,我们项目使用Canvas渲染要优于使用...但是因为CanvasAPI和DOM/SVG差别较大,因此要把例子移植为Canvas渲染,改动比较大,这样不利于开发人员快速学习和使用D3完成项目。...CSS3 Animation和Transition 支持文字排版,支持line-break、word-break等相关属性 支持外部时钟,可以很好地和其他Canvas库无缝集成 支持React、PReact...基于SpriteJS图表库 那么如何实现上面这些特性,尤其是高性能地实现这些特性呢?...如果涉及到Label或带有LayoutGroup,还有可能会触发retypesetting和relayout操作,如果使用文档CSS,涉及到属性恰好包含在CSS规则,那么还可能会触发更复杂updateStyles

    2.2K30
    领券