Comments (3)
hi @jean-Phil, could you provide the code are you trying? It seems like the error message point out that you are selecting a DOM that is not exist while rendering.
React.render(
...
// make sure getElementById('id') get the existing DOM in HTML
, document.getElementById('blank-legend')
)
from react-d3-core.
Hello @chilijung,
Thank you for your prompt reply.
...That is the first thing I checked... The code was very simple. I pasted the legend example into a js file:
"use strict";
var React = require('react');
var Legend = require('react-d3-core').Legend;
(function() {
var width = 960,
height = 500,
margins = {top: 40, right: 50, bottom: 40, left: 50},
legendClassName = "test-legend-class",
legendPosition = 'left',
legendOffset = 90,
chartSeries = [
{
field: 'Under 5 Years',
name: 'Under 5 Years',
color: '#1f77b4'
},
{
field: '5 to 13 Years',
name: '5 to 13 Years',
color: '#ff7f0e'
},
{
field: '14 to 17 Years',
name: '14 to 17 Years',
color: '#2ca02c'
},
{
field: '18 to 24 Years',
name: '18 to 24 Years',
color: '#d62728'
},
{
field: '25 to 44 Years',
name: '25 to 44 Years',
color: '#9467bd'
},
{
field: '45 to 64 Years',
name: '45 to 64 Years',
color: '#8c564b'
},
{
field: '65 Years and Over',
name: '65 Years and Over',
color: '#e377c2'
},
]
React.render(
<svg width= {width} height= {height}>
<rect height= {"100%"} width= {"100%"} fill= {"#CCC"} />
<Legend
width= {width}
height= {height}
margins= {margins}
legendClassName= {legendClassName}
legendPosition= {legendPosition}
legendOffset= {legendOffset}
chartSeries = {chartSeries}
/>
</svg>
, document.getElementById('blank-legend')
)
})()
Everything seems to appear just fine in the "webpacked" output js file. Here's the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="./node_modules/react-d3-core/css/axis.css">
</head>
<body>
<div id="blank-legend"></div>
</body>
<script src="./dist/legend.js"></script>
</html>
Upon reading your reply, I downloaded the react-d3-example repo, and updated React to 0.14. The few examples I tried seem to be using React 0.14 and they work. I didn't dig very deep, though.
NOTE: While we're at it, there are two things which would need to be updated in the HTML files:
- utf-8 charset declarations
- the paths to the dist folder is only one level up, not two.
If you'd like me to test or do anything, please let me know. I'll keep getting more familiar with your code and try and figure out what's wrong with this little snippet. Until then, thank you!
JP
from react-d3-core.
close this for now, I've moved all repo's core, basic, tooltip, brush... to [email protected]
from react-d3-core.
Related Issues (20)
- remove x, y is required
- axis ticks rotate
- remove using webpack to require css, setting css in react instead
- xextent and yextent in zoom
- chart title should remove default value HOT 1
- remove zoom function in svg
- add xgrid and ygrid and export to a component
- add rotate in axis
- grid sometimes not working properly
- Missing Object.assign polyfill HOT 1
- ShowLegend = false has no effect HOT 1
- xScale is not propagated to grid HOT 4
- Prop validation for axis fails with ordinal scales
- Support tickvalues for axis
- Please publish the source to NPM correctly HOT 2
- Create UMD build
- Does react-d3 support server-side rendering? HOT 2
- Accessing PropTypes via the main React package is deprecated. HOT 2
- Add jsnext:main to allow transpiling [feature request]
- doesn't work with react 16.1.0 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-d3-core.