[D3] Animate with the General Update Pattern in D3 v4
in The with update pattern v4 D3 General
2023-09-14 09:00:51 时间
In D3, the General Update Pattern is the name given to what happens when a data join is followed by operations on the enter, update, and exit selections. When a chart's data changes over time and each update can both create new elements and destroy existing ones, the General Update pattern can help convey meaning to users. This lesson demonstrates the pattern using animated transitions on a column chart.
function render(subject = 'math') { // Define a resuable transation variable var t = d3.transition().duration(1000); var update = svg.selectAll('rect') .data(data.filter(d => d[subject]), d => d.name); //d => d.name is a uniq idientifier // First: we want to remove the existing object which doesn't have any value // Get rid of null value object // Also animation y and height attr to produce // fade out effect update .exit() .transition(t) .attr('y', height) .attr('height', 0) .remove(); // Second, we want to animate the existing elements height update .transition(t) .delay(1000) .attr('y', d => yScale(d[subject])) .attr('height', d => height - yScale(d[subject])); // Last, for the new data which is not in the page before // We want to animate update .enter() .append('rect') .attr('y', height) .attr('height', 0) .attr('x', d => xScale(d.name)) .attr('width', d => xScale.bandwidth()) .transition(t) .delay(update.exit().size() ? 2000: 0) // If page refresh, we don't want to wait 2000ms .attr('y', d => yScale(d[subject])) .attr('height', d => height - yScale(d[subject])); } render();
相关文章
- “xxxxxxxxx”signer information does not match signer information of other classes in the same package
- 【错误记录】Flutter 编译报错 ( The parameter ‘‘ can‘t have a value of ‘null‘ because of its type, but the im )
- ORA-01689: syntax error in clause “string” of string ORACLE 报错 故障修复 远程处理
- ORA-22978: only simple attribute name is allowed in the WITH OBJECT OID clause ORACLE 报错 故障修复 远程处理
- ORA-25114: invalid file number specified in the DUMP DATAFILE/TEMPFILE command ORACLE 报错 故障修复 远程处理
- ORA-28513: internal error in heterogeneous remote agent ORACLE 报错 故障修复 远程处理
- ORA-31128: The event handler calls cannot exceed the depth of string ORACLE 报错 故障修复 远程处理
- ORA-32019: The parameter SPFILE cannot be updated in the server parameter file. ORACLE 报错 故障修复 远程处理
- ORA-38446: Error with embedded ADT “string” in the attribute set. ORACLE 报错 故障修复 远程处理
- ORA-41671: duplicate table names in the event structure with table aliases ORACLE 报错 故障修复 远程处理
- ORA-46015: The value of the “paramDatatype” element is too long. ORACLE 报错 故障修复 远程处理
- ORA-48444: The single “.” and “*” cannot appear in the middle of the path ORACLE 报错 故障修复 远程处理
- ORA-48486: The file [string] exceeds the maximum length [string] ORACLE 报错 故障修复 远程处理
- ORA-55637: Flashback Data Archive enabled table “string”.”string” is not in the correct compliance mode for this operation ORACLE 报错 故障修复 远程处理
- ORA-02324: more than one column in the SELECT list of THE subquery ORACLE 报错 故障修复 远程处理
- ORA-09704: sstascre: ftok error in creating test and set pages. ORACLE 报错 故障修复 远程处理
- ORA-12214: TNS:missing local communities entry in TNSNAV.ORA ORACLE 报错 故障修复 远程处理
- ORA-13033: Invalid data in the SDO_ELEM_INFO_ARRAY in SDO_GEOMETRY object ORACLE 报错 故障修复 远程处理
- ORA-13221: unknown geometry type in the geometry object ORACLE 报错 故障修复 远程处理
- ORA-13304: failure to insert a transformed geometry object in a table ORACLE 报错 故障修复 远程处理
- ORA-19035: Invalid select item of the query in newContextFromHierarchy() ORACLE 报错 故障修复 远程处理
- 提升Oracle中IN操作的效率(oracle的in效率)
- Exploring the Power of Bitwise Operations in Oracle SQL with the Bitwise OR Operator(oracle位或)
- Discover the Power of Linux with YLMF: The UserFriendly Operating System(linuxylmf)
- MySQL中IN运算符的使用技巧(mysql中 与in)
- MySQL中使用IN函数实现范围查询(mysql中in的范围)
- 利用Oracle中的If In语句减少数据处理时间(oracle中if in)
- Oracle子程序参数模式,IN,OUT,NOCOPY