independent-xy-react-d3-graph v0.1.9

Independent XY React D3 Graph

Out of the box solution for independent X Y zooming graph.

Features

• Built in independent XY axis zooming through hovering on the axis
• Responsive - Built in resize detector
• Use JSX to create graph elements and automatically rerender when needed
• Programmatic zoom with a ref

Setup

$ npm i independent-xy-react-d3-graph

import Graph from 'independent-xy-react-d3-graph';

<Graph {...props}>
  {...children}
</Graph>

Usage

Rendering Elements

The goal of this Graph component was to mix the customizability of svg elements through D3 and the ease of composability through JSX. In order to achieve this, the Graph component works as a HOC that returns a function with certain properties. For example:

<Graph>
  {({ xScale, yScale, size, defaultClipPathId }) => {
    return elements;
  }}
</Graph>

As the zoom state or the size changes within the graph, it will pass the xScale, yScale and a few other state to the user. Then, these functions and state can be used to modify the positioning of the desired elements while staying synchronized to the zoom state.

The callback function can return a single JSX element or an array. Note that when an array is used, each element needs to have a key prop just like any other React array rendering. | Name | Type | Desc | |-------------------|-----------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------| | xScale | d3.scaleLinear() | Function that scales with the Graph's X axis zoom state. | | yScale | d3.scaleLinear() | Function that scales with the Graph's Y axis zoom state. | | size | { width: number, height: number } | Object defining the size of the Graph component. | | defaultClipPathId | string | ID of the built in clipPath element. The bounds are within the displayed axes. This ID is set with the time component upon component mount. |

Accessing Graph Zoom Functions

To programmatically modify the zoom state of the Graph component, the user can access the Graph properties through the use of a ref. In order to do so, pass a ref into the Graph component.

<Graph ref={this.graphRef}>
  {({ xScale, yScale, size, defaultClipPathId }) => {
    return elements;
  }}
</Graph>

this.graphRef.current.zoomToX(newXDomain);
this.graphRef.current.zoomToY(newYDomain);

Probably the most useful functions zoomToX and zoomToY receive an array of numbers: the desired zoom domain. Ex. [80, 200].

These functiosn trigger the domain modified callback functions without the userAction set to true.

Props