react-d3 / react-d3-core Goto Github PK
View Code? Open in Web Editor NEWCore components for reusability.
Home Page: http://reactd3.org/docs/core
Core components for reusability.
Home Page: http://reactd3.org/docs/core
move legend out of the chart
TypeError: Cannot read property 'string' of undefined
scaleExtent: [1, 10]
79 | }, _commonProps2.default);
80 | ChartSvg.propTypes = {
81 | id: _react.PropTypes.string,
82 | width: _react.PropTypes.number.isRequired,
83 | height: _react.PropTypes.number.isRequired,
84 | margins: _react.PropTypes.object.isRequired,
I think this appears because _react.PropTypes is undefined
from what I can tell in the examples and docs, ShowLegend is a bool that determines if the legend is shown.
However, ShowLegend={false} appears to have no effect.
For example, using the PieChart example, adding ShowLegend={false} does nothing.
Am I missing something stupid?
James
It would be nice if there was an UMD build available to make it easier to use react-d3 in AMD environments.
See https://webpack.github.io/docs/configuration.html#output-librarytarget
I can create a PR if you like.
Please add the jsnext:main
to allow developers to transpile in their own environment.
Hi guys,
The latest build 1.3.8 doesn't have any source, please publish the ./lib folder. All dependents are not able to use right now.
Thanks.
I'm getting the following prop validation failure when an xScale is ordinal:
Warning: Failed propType: Invalid prop `xScale` of value `band` supplied to `Grid`, expected one of ["linear","identity","sqrt","pow","log","quantize","quantile","ordinal","time"].
It looks like when a scale is set to ordinal, it actually is set to 'band' via axis.jsx: https://github.com/react-d3/react-d3-core/blob/master/src/axis/axis.jsx#L80
Would including 'band' in the allowed prop types fix this?
I get a warning when trying to use an ordinal xScale in Barchart or ordinal yScale in BarHorizontalChart:
(Barchart:)
Warning: Failed propType: Invalid prop xScale
of value band
supplied to Grid
, expected one of ["linear","identity","sqrt","pow","log","quantize","quantile","ordinal","time"]. Check the render method of YGrid
.
(BarHorizontalChart:)
Warning: Failed propType: Invalid prop yScale
of value band
supplied to Grid
, expected one of ["linear","identity","sqrt","pow","log","quantize","quantile","ordinal","time"]. Check the render method of XGrid
.
Seems like it is not propagated properly to the grid.
I'm currently evaluating react charting solutions, and react-d3 looks like a solid option. However, I have a hard requirement to be able to render charts directly to HTML strings, outside the context of a browser and otherwise without using a headless DOM implementation.
The reason I ask is because I was given to understand d3 needs to operate directly on the DOM, so I'm wondering how that works with React, which can renderToString()
when no DOM is present.
Thanks!
default ylabel position is not right
If a values array is specified, the specified values are used for ticks, rather than using the scale's automatic tick generator. If values is null, clears any previously-set explicit tick values, reverting back to the scale's tick generator. If values is not specified, returns the currently-set tick values, which defaults to null. For example, to generate ticks at specific values:
var xAxis = d3.svg.axis()
.scale(x)
.tickValues([1, 2, 3, 5, 8, 13, 21]);The explicit tick values take precedent over the tick arguments set by axis.ticks. However, any tick arguments will still be passed to the scale's tickFormat function if a tick format is not also set; thus, it may be valid to set both axis.ticks and axis.tickValues.
lowPriorityWarning.js:40 Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs
in LineChart.js
still using React.propTypes
instead of exporting PropTypes
from prop-types
Hello Chilijung,
First, kudos for this endeavour. I really like your take on react and D3 integration.
I tried running the examples in React 0.14, but without success.
I got an...
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
I was wondering: Have you done any testing yourself?
Is react-faux-dom the culprit?
add on mouseover and out function on legend
support every scales detail settings in axis.jsx
Hello!
Just wanted to let you know that the current build is not working on IE because of it's use of Object.assign. Adding a simple polyfill should resolve this :)
Thanks for a great library!
using immutable js to set data in state
utils
The reason doing this is when props that come from parent changes, we can check for props change and re-render the whole child components
remove setscale prop in axis
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.