Skip to content

v1.0.2

Latest
Compare
Choose a tag to compare
@pemrouz pemrouz released this 24 Jan 21:08
· 61 commits to master since this release

This is a major rewrite to factor out D3. The motivation for this is to make rendering more performant. Previously, with D3 as the engine for creating joins the maximum rate on DBMonster was about ~9. Rewriting the hottest parts of the code, it's now closer to ~40 and has the fastest rate compared to all the other frameworks.

The outer API has stayed the same (enter, exit, accessors, IE9+ compatible, etc). However, using this substantial change I've tidied a few rough edges with the API:

  • el is now never required. It was previously used when you wanted to precreate an element from a selector containing attributes:
- once(node)
-   (el('tag.class[attr=val]'))

+ once(node)
+   ('tag.class[attr=val]')
  • enter and exit are now functions rather than properties (previously the only API difference with D3):
once(node)
  (li, [1, 2, 3])
-   .enter
+   .enter()
    .classed('class', true)
  • Passing in a datum of 1 was a shortcut for creating a single structural element, whose datum was irrelevant. This is now:

    i. An optimised route

    ii. A shortcut for passing the identity function and inheriting parent data, if any, or defaulting to 1.

once(node)
  ('div', { name: 'foo' })
-   ('span', d => d)
+   ('span', 1)
      .text(d => d.name)
  • Attribute values now need to be quoted, as if they were a valid CSS selector
once(node)
-  ('div[key=val]', 1)
+  ('div[key="val"]', 1)
  • There is no style accessor in this release. This may be re-added in the future. But setting inline styles is not particularly performant, and you should use classes instead.
  • The > selector is no longer required. This was previously required to fix joins to the immediate children when it may be ambigiously confused with other deeper elements. Mixing selections across different levels was mostly an accident, so this restricting to the current level is now the default behaviour.
  • Previously, using a function as the selector with no data, defaulted the data parameter to 1 (i.e. create one). A data parameter is always required now to create elements. A single argument always changes the selection.
once(node)
-  (d => 'div')
+  (d => 'div', 1)
  • There is no .datum property. This only returned the datum for the first element in the selection and was rarely used.
  • There is no .sel property. This returned the raw D3 selection. Now you can use .nodes, .enter(), .exit() to get an array of nodes and select them with D3 to create a D3 selection.