react-d3 / react-d3-example

Several examples for demontrate the power of react-d3

react-d3 examples

Several examples for demontration the power of react-d3.

See ./simple for simple usage.

See ./detail for detail usage.

View more info in http://reactd3.org

Development

for development mode:

NODE_ENV=0 webpack

for production mode:

NODE_ENV=1 webpack

• webpack.map.config.js map webpack.

• webpack.config.js chart with detail configuration.

• webpack.simple.config.js chart with simple configuration.

react-d3-example's Issues

Typo in

Several examples for demontration the power of react-d3.

I don't think you mean "demontration"

D3v3 in dependency tree

Hi, thanks for your work.
I'm trying to use the latest version of your react-d3-basic library but I'm getting a conflict with D3 version
seems that you are getting d3v3 as transitive dependency for the react-d3-shape and this conflicts with other libraries using the correct d3v4 version.
$npm ls react-d3-basic
├─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected]

Could you fix soon?

Why do my chartSeries colors not map to lines in LineChart?

When I plot a LineChart my lines are all blue even though my legend has the colors specified in the chartSeries? What could I be doing wrong?

How do the simple line examples expect the time to be parsed?

Looking at the example line_garbage_zoom.js (and many other line examples). It looks like the date needs to be parsed:
var parseDate = d3.time.format("%YM%m").parse;

And the parser is used like so:

    x = function(d) {
      return parseDate(d.month);
    }

The problem, however, is I do not believe d3 has a time method, so I wonder if this example is outdated.

Here is how I import D3
import * as d3 from 'd3'

When I inspect the import it has methods available such as timeParse and timeMonths , (no time) and I can not quite parse the time how the line graph expects it.

Am I right in thinking that d3.time is no longer available? Every example in the simple/line folder uses this time parser so I would really like to figure it out.

multipule brush

react d3 responsive chart

Hey is there a way to adjust the chart so its RWD? I can set the width here but its not responsive

      <AreaChart
          showXGrid= {false}
          showYGrid= {false}
          margins= {margins}
          title={'demo chart'}
          data={this.props.data}
          chartSeries={chartSeries}
          x={x}
          xDomain = {xDomain}
          yLabel = {'depth'}
          width = {400}
          height = {200}
        />

The most basic examples in this project simply do not work

does not work

it seems, these example don't work anymore.

animate

Cannot see examples

I don't find the way to see the examples, I've tried both production and development, I get the built files but when I open the html I get a d3 not found. I've tried with a webpack-dev-server to serve the examples

add mix positive and negative value samples

Please explain how to start the server

In your README, it would be helpful to provide an explanation of how to start the server just after cloning the repo.

Why Chart component not working?

my code:

<Chart>
<LineChart
              showXGrid= {true}
              showYGrid= {true}
              margins= {margins}
              title={title}
              data={ChartData}
              width={width}
              height={height}
              chartSeries={ChartSeries}
              x={x}
            />
</Chart>

It's blank on my webpage.When I delete Chart Component,it working!Why?