yang-wei/rd3

react + d3

Future of rd3

Currently I don't have time to manage this library anymore so if someone is willing to maintain I would like to transfer this repository. Please see #88 Let us discuss where will this library heading.

rd3 (forked from react-d3)

Modular ReactJS charts made using d3 chart utilities.

Usage

The latest version of rd3 requires React 0.14 or later. If you are using older React version, please refer to here

npmcdn

Thanks to npmcdn you can now try out rd3 quickly:

• https://npmcdn.com/rd3/build/public/js/react-d3.js
• https://npmcdn.com/rd3/build/public/js/react-d3.min.js

Note: rd3 depends on react and d3, you will need to include those scripts if you aren't yet.

• https://npmcdn.com/react/dist/react.min.js
• https://npmcdn.com/react-dom/dist/react-dom.min.js
• https://npmcdn.com/d3

You can refer to fiddle example too.

NPM

Or via npm:

If you havn't installed react and d3 then:

npm install react react-dom
// currently we do not support [email protected]
npm install [email protected]

npm install rd3

Then, import into your ReactJS project:

var rd3 = require('rd3');
// es6
import rd3 from 'rd3';

The charts are then available under the rd3 namespace, which you can then use as shown on the documentation:

Available Charts

const BarChart = rd3.BarChart;
const LineChart = rd3.LineChart;
const PieChart = rd3.PieChart;
const AreaChart = rd3.AreaChart;
const Treemap = rd3.Treemap;
const ScatterChart = rd3.ScatterChart;
const CandleStickChart = rd3.CandleStickChart;

For usage, please see here.

Support

• Chat:
• Issues: rd3 issues on Github

Background

Although there have been several different approaches proposed for combining the power of d3 with the flexibility and modularity of ReactJS, the approach I'm using here was inspired by this blog post by Ben Smith of Binary Consulting.

With this approach, React itself is responsible for generating the SVG markup. d3.js is used for its tremendous collection of utility functions, such as those that calculate the path value for various chart types.

License

MIT

Copyright (c) 2014-2016 Eric. S Bullington, Lim Yang Wei, and project contributors

rd3's Issues

Custom colors?

Is there any way to customize the colors of the charts?

How do i change the legend position?

I can see that there is a legendPosition on LegendChart, however it doesn't appear to do anything.

Is there a way i can set the position of the legend?

ToolTip fails in LineChart for Date objects

I've some data series which look like this:

let series = [{
 name: 'test',
 values: [{date: new Date(), count: 3}]
}];

I forked the LineChart Fiddle to demonstrate the problem: https://jsfiddle.net/Le5vt2ot/

After some debugging I found the error in Line 81 in DataSeries.js:
if (Object.prototype.toString.call(xAccessor(point)) === '[object Date]') {

The point object as this place has only a x and y value, but no date or count as expected by the accessor. Therefore, the call fails and returns null/undefined.

Support Logarithmic scale of axes.

There is a previous commit 1e62026 implementing custom
xScale and yScale for LineChart but this was reverted b39a48a just a couple of days later. Why is this?

I ask because I would like to support a logarithmic scaling for the y-axis instead of the default linear scaling.

Some works need to be done

• update dependencies (hope to remove both react and d3 from dependencies)
• demo page (is now difficult to maintain)
• documentation (keep using wiki or show more in demo page)
• eslint
• update the original repository about rd3
• babel 6 for smaller bytes

Unexpected value NaN parsing cy attribute

Using values other than x and y on a LineChart with xAccessor/yAccessor yields this error: Unexpected value NaN parsing cy attribute (also with cx).
Fiddle with the default LineChart example with pairs changed to a/b instead of x/y and the accessor props added: https://jsfiddle.net/terebentina/9g7zbk0h/21/

Graph point dots not the same color as given in 'colors' function

The dots on my graph isn't the same color as the color given in the 'colors' function in the LineChart component. They seem to initially be random colors then red if I hover over them.

xAxisTickCount not working for LineChart

xAxisTickCount props is not included in the XAxis in LineChart.

It's a minor bug and I've made a pull request for it.

Anything else I should add to LineChart while I'm at it?

PS: first time contributing to OSS, not sure how to refer to the pull request in this issue.
EDIT: Nvm. just figured it out :)

Callback for interactivity with data points?

I'd like to be able to specify a callback which gets called when a user clicks on a highlighted data point (e.g. in ScatterChart). Is that something you think is in scope for this library, or do you have an alternative approach to recommend?

LineChart accessor: Cannot read property 'x' of undefined(…)

Passing data = {lineData}, with lineData = [], throws

TypeError: Cannot read property 'x' of undefined(…)

apparently because the default accessor (d) => d.x does not find any d to act upon, so it takes undefined instead. The following accessors solve it, but it is ugly from a user perspective:

xAccessor={ (d) => d ? d.x : 0 }
yAccessor={ (d) => d ? d.y : 0 }

Edit: similar to #43, and probably all other charts.

Y-axis text cut off

See screenshot:

Looks like the problem is the overflow: hidden set on the <svg /> with class rd3-chart.

Warning on Bar Chart

Warning: Unknown props hoverAnimation, dataPoint, handleMouseOver, handleMouseLeave on tag. Remove these props from the element. For details, see https://fb.me/react-unknown

I implemented all charts according to their respective official examples and this is the only one that throws an alert.

BTW, I am displaying charts over a react-grid-layout.

I am just a newbie, but I am willing to help you as per request, just need some guidance on react grounds though.

Warnings about unknown props with React 15.2.0

With react version 15.2.0 I get warnings such as

Warning: Unknown props `hoverAnimation`, `dataPoint`, `handleMouseOver`, `handleMouseLeave` on <rect> tag.

with the BarChart (probably with other chart types as well). I believe the reason is that all props are delegated to the <rect> tag for example here.

Please update the peer dep to d3 ^4.0.0

this.getDOMNODE() deprecated

https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode

;)

initial feedback for new V1 API

I had been talking about major release for past few month and I am working on it.
I had been received a lot of feature request or to support additional prop to let user do something and our library exploded and became difficult to maintain.

To sum up what changes are coming:

• axis will be break up as another component and let you decide how to use it
  • double y-axis will be possible now !
  • more configurable axis
• scale will become required property
  • see d3 scale
• we will maintain less code and you will get a lot of control of your graph
• fully supported mouse event (mouseEnter, mouseLeave and mouseClick)

You can see a very basic working bar chart at my development branch (more to come)

• https://github.com/yang-wei/rd3/blob/v1/examples/BarChart.jsx

I would like to hear any idea and request if you have some. Cheers !

Github link in documentation is incorrect.

Documentation links to https://github.com/yang-wei/rd3.js/ rather than https://github.com/yang-wei/rd3

XAxis stroke for BarCharts

At the moment it isn't possible (as far as I can see) to style the XAxis' stroke prop, as it isn't passed down.

It also looks like the bars themselves could need a slight move out from the axis as well, as it looks kind of cramped (overlapped) with strokes enabled:

Request for Bullet Chart

Hello,

Im requesting that a Bullet Chart be added to this library. I think it would be a pretty quick and easy addition yet add a good bit of value.

Thank you.

Allow to hide axes

I couldn't find in the documentation a way to hide the axes from a plot, like xAxis={false}.

Installing rd3 doesn't install d3?

$ npm install --save rd3
├── UNMET PEER DEPENDENCY d3@^3.5.0

And then my webpack build failed.

After running npm install --save d3 it worked as expected.

findDOMNode(this) returns null in _animateCircle()

In VoroniCircleContainer.jsx in the linechart folder, findDOMNode is returning null, which is messing up the animation.

 _animateCircle() {
    const rect = findDOMNode(this).getElementsByTagName('circle')[0].getBoundingClientRect(); //here
    this.props.onMouseOver.call(this, rect.right, rect.top, this.props.dataPoint);
    this.setState({
      circleRadius: this.props.circleRadius * (5 / 4),
      circleFill: shade(this.props.circleFill, 0.2),
    });
  }

I haven't been able to diagnose the issue, but it appears to be passed to a child component, which could be confusing react for some reason or another. Any idea what is wrong?

I don't have a problem with my npm installed rd3, but am having it with the cloned version from this repo.

    let handleMouseOver;
    let handleMouseLeave;
    if (props.hoverAnimation) {
      handleMouseOver = this._animateCircle; // here
      handleMouseLeave = this._restoreCircle;
    } else {
      handleMouseOver = handleMouseLeave = null;
    }

    return (
      <g>
        <VoronoiCircle
          handleMouseOver={handleMouseOver} //here
          handleMouseLeave={handleMouseLeave}
          voronoiPath={this._drawPath(props.vnode)}
          cx={props.cx}
          cy={props.cy}
          circleRadius={this.state.circleRadius}
          circleFill={this.state.circleFill}
        />
      </g>
    );

Group Bar Chart

Hi, is there a way to put have a group bar chart? such as

Before that, I'd really say thank you for you hard work. This is really easy to use.

Adding labels and modifying existing ones

Hi,

Thank you really much for this work, very useful and easy to use.

I'm currently working on PieChart, and I'm trying to add/modify some stuff to the basic one:

• a "total" label (which displays the absolute total of the values used for the chart), in the center of the circle
• adding a background or borders to the existing labels (which may need to add some <line> or <rect> element

Those are just examples, but what is in your opinion the best way to modify/add shapes in svg in rd3 components?

Cannot assign to read only property 'data' of object '#<Object>'

I'm trying to use LineChart with Dates and i've just copied this example but i get the error on issue title.

This is a jsfiddle example: https://jsfiddle.net/cnomx3w1/

enable click handlers for charts

LineChart incorrect accessors throws: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN".

I get this when the accessors are not correct, e.g. when data.values is given as {key: 1, val: 3} instead of {x: 1, y: 3} with the default accessors:

LineChart: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN".

The error message could be improved (it took me about 15 min to figure it out).

Anyway I can overlay lines on a candlestick?

First off, thanks for the good work.
Candlesticks are often displayed with overlaying straight lines, to express "stop loss" and "confirmation level".
Can I do that with RD3?
Thank you!

Legend.js Uncaught TypeError: Cannot read property 'category20c' of undefined

I'm prototyping addition of rd3 to my existing React app (ES6, webpack, d3 v3.5.17, rd3 v0.6.5)

I grabbed exact example code from https://yang-wei.github.io/rd3/docs/new/charts/lineChart.html and copied the <LineChart ... /> into an existing modal dialog.

Opening the page resulted in the above error in the console, traced to here:

  getDefaultProps: function getDefaultProps() {
    return {
      className: 'rd3-legend',
      colors: d3.scale.category20c(),
      colorAccessor: function colorAccessor(d, idx) {
        return idx;
      },
      itemClassName: 'rd3-legend-item',
      text: '#000'
    };
  },

Any ideas on what is going wrong here? I'm a complete n00b to D3, so not sure where to look

BarChart invalid width warning

There is a check on the type of the width prop:

warning.js:44Warning: Failed prop type: Invalid prop `width` of type `string` supplied to `BarChart`, expected `number`.

that prevents it from being, say, '100%'. Visually it works, though. Probably check height as well.

Responsive container

It would be nice to have a responsive container for charts

Specify mouse over and mouse out handlers

Hi,

Thanks for the hard work. Really easy to setup and use!
I was wondering if there is any plan on letting users specify custom mouse over and mouse out handlers?

If you are open to the idea I would be excited to try to contribute and add this feature if you think it is within scope of the project.

BarChart unknown props warning

When my bar plot shows, I get this in the console:

Warning: Unknown props `hoverAnimation`, `dataPoint`, `handleMouseOver`, `handleMouseLeave` on <rect> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in rect (created by exports)
in exports (created by exports)
in exports (created by DataSeries)

Plotting a threshold line on top of a bar chart

Is it possible to use this library to make a chart similar to this:

Additionally, can I colour the bars differently depending on whether or not they are above the threshold line?

yAxis is not rendered

There is a bug, that can be seen even on the LineChart example: https://jsfiddle.net/YangWei/9g7zbk0h/?utm_source=website&utm_medium=embed&utm_campaign=9g7zbk0h

YAxis is not rendered. To be precise, it's path's d attribute is set incorrectly. I was able to fix it locally by changing
d = 'M' + sign * props.outerTickSize + ',' + range[0] + 'H0V' + range[0] + 'H' + sign * props.outerTickSize;
to
d = 'M' + sign * props.outerTickSize + ',' + range[0] + 'H0V' + range[1] + 'H' + sign * props.outerTickSize;
code

Can somebody fix this please, if this is really a bug?
*Note: my npm code seems little different, so I don't want to mess up with an untested pull request.

Tooltips should use position: absolute

There are two issues with using position: fixed for tooltips.

1. It means the tooltip isn't affected by scrolling while the chart is, so the two will get out of sync when the user scrolls the viewport after the tooltip was placed.
2. position: fixed is not necessarily relative to the viewport.

One solution to both issues would be to calculate the offset between the hotspot's and the chart's bounding client rects and then use position: absolute to place the tooltip relative to the chart.

gulp release failing in esprima?

I'm getting an odd build failure:

dascher-29223:rd3 dascher1$ gulp release
Loading plugins: 880ms
[13:01:36] Using gulpfile ~/src/rd3/gulpfile.js
[13:01:36] Starting 'copymisc'...
[13:01:36] Starting 'clean:build'...
[13:01:36] Finished 'clean:build' after 25 ms
[13:01:36] Starting 'minified'...

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: Parse Error: Line 13: Unexpected token {
    at throwError (/Users/dascher1/src/rd3/node_modules/esprima-fb/esprima.js:2808:21)
    at throwUnexpected (/Users/dascher1/src/rd3/node_modules/esprima-fb/esprima.js:2870:9)
    at expect (/Users/dascher1/src/rd3/node_modules/esprima-fb/esprima.js:2879:13)
    at parseObjectInitialiser (/Users/dascher1/src/rd3/node_modules/esprima-fb/esprima.js:3419:17)
    at parsePrimaryExpression (/Users/dascher1/src/rd3/node_modules/esprima-fb/esprima.js:3553:20)
    at parseLeftHandSideExpressionAllowCall (/Users/dascher1/src/rd3/node_modules/esprima-fb/esprima.js:3656:61)
    at parsePostfixExpression (/Users/dascher1/src/rd3/node_modules/esprima-fb/esprima.js:3696:20)
    at parseUnaryExpression (/Users/dascher1/src/rd3/node_modules/esprima-fb/esprima.js:3763:16)
    at parseBinaryExpression (/Users/dascher1/src/rd3/node_modules/esprima-fb/esprima.js:3853:16)
    at parseConditionalExpression (/Users/dascher1/src/rd3/node_modules/esprima-fb/esprima.js:3913:16)

FYI:

dascher-29223:rd3 dascher1$ node --version
v4.4.1
dascher-29223:rd3 dascher1$ npm --version
3.5.2

Customizable legend

esbullington/react-d3#316

LineChart domain error: <path> attribute d: Expected number, "MZ".

When the domain prop is given incorrectly to a LineChart (I just cannot figure it out), it throws

Error: <path> attribute d: Expected number, "MZ".

which is not very helpful. A better error message would be welcome.

How to add labels for the plots in Line chart

Hi, is there any option to add label for all data points in LineChart?

eslint

@jonase

The CONTRIBUTING.md is kind of outdated and I prefer airbnb eslint config.

Currently we are using gulp for build tools but if using npm scripts can achieve the same thing then we can avoid gulp.

I do not hold particular style regarding to linting. Feel free to discuss anything here =)

Unable to put animation on donout (Pie chart) chart and how to put a svg image in donut chart ?

Hey Thanks for the Library, I have some questions How i can set animation in donuts (like tween arcs) and i want to put a svg image in donut. how i can do this ?

i wanna create something like this.

There is currently no way to change the tooltip styles

The tooltip doesn't expose any props to change its styles nor a class.
I could make a PR to change this, what key would you want to use for styling the tooltip?

Uncaught TypeError: Cannot read property 'document' of undefined

I'm currently receiving this error in D3 so this might not be a rd3 specific issue but I want to make you aware of the problem incase there's a solution that I've missed.

The problem seems to be that D3 uses var d3_document = this.document;.

According to this issue D3 doesn't support being used anywhere with use strict.

Since this is the case, it looks like a D3 issue rather than an rd3 issue however I'm curious to understand how anyone using ReactJS is therefore getting this to work. Almost every ReactJS project I've seen (or worked on) is compiled with use strict as the default. Is there a known solution to this?

Thanks for maintaining rd3, I'm very much appreciative of the time and effort you've put into this OSS project.

LineChart fails using xAccessor to parse dates

An error is thrown by d3 when using the date parsing xAccessor in the documentation. Here it is:

xAccessor={(d)=> {
              var formatter = d3.time.format("%Y-%m-%d").parse;
              return formatter(d.x);
          }} 

On examination, it appears thy my xAccessor is being called twice, once when calling utils.flattenData() in LineChart.jsx and a second time in DataSeries.jsx when defining regions. see below

DataSeries.jsx

    var regions = voronoi(props.value).map(function(vnode, idx) {
      var point = vnode.point.coord;

     // fails here
      if (Object.prototype.toString.call(xAccessor(point)) === '[object Date]') {
        cx = props.xScale(xAccessor(point).getTime());
      } else {
        cx = props.xScale(point.x);
      }
      // also probably fails here
      if (Object.prototype.toString.call(yAccessor(point)) === '[object Date]') {
        cy = props.yScale(yAccessor(point).getTime());
      } else {
        cy = props.yScale(yAccessor(point));
      }

D3 returns an error when you call xAccessor the second time because it can't use str.slice() on a datetime object. The following code fixed the problem, but I'm sure you have a more robust way of dealing with it:

"Fixed" DataSeries.jsx

 var regions = voronoi(props.value).map(function(vnode, idx) {
      var point = vnode.point.coord;

       // removed xAccessor
        cx = props.xScale(point.x);

       // removed yAccessor

        cy = props.yScale(point.y);

      circleFill = props.colors(props.colorAccessor(vnode, vnode.point.seriesIndex));

      return (
          React.createElement(VoronoiCircleContainer, {
              key: idx, 
              circleFill: circleFill, 
              vnode: vnode, 
              cx: cx, cy: cy, 
              circleRadius: props.circleRadius}
          )
      );
    }.bind(this));

Thanks for building an awesome library!

Dual y-axis

I see esbullington/react-d3#209 and am wondering if this still stands? It'd be awesome if the LineChart API offered a way to have two Y axes rather than needing to work with the primitives.

How to specify line chart minimum Y value?

How can I make a LineChart not use the default "auto" mode of choosing the chart min and max Y values from the input data, but rather override the minimum chart Y axis value to say zero?

Presumably this can be set somehow with some of these props: https://yang-wei.github.io/rd3/docs/new/cartesianChartPropsMixin.html - but how?

Maybe add an example into the rd3 docs on how to do this?

BarChart fails to render with empty series data

When trying to do an initial render with no series, the BarChart fails when trying to calculate the domain.

Series Data:

var data = [];

Axes props and their docs

The docs should indicate that props are passed as

<BarChart {...props} {...cartesianChartProps} {...axisProps} />

Then you can link to the docs for the cartesian chart mixin and Axes, and remove all stuff concerning them that is repeated for every chart - incompletely and soon inconsistently, because it needs to be maintained at many places.

Proposal: cartesianChartProps and axisProps would actually better be passed as a single object prop, e.g.

<BarChart {...props} xAxis={{tickValues, tickPadding}} />

so that prop names remain consistent across components (no prefix), for maintainability (1 prop to transfer), and to simplify the docs (1 prop to document for charts, then link to the Axes docs).

BarChart: <rect> attribute width: Expected length, "NaN".

When not specifying viewBoxObject in a BarChart, it throws

DOMPropertyOperations.js:147Error: <rect> attribute width: Expected length, "NaN".
Error: <rect> attribute x: Expected length, "NaN".

Same error if the accessors are wrong and no x nor y can be accessed.

The error message should be improved.