Comments (9)
Excellent! I'll try to explain.
// This returns a faux SVG element, as you're aware.
ReactFauxDOM.createElement('svg')
// This returns a faux SVG element wrapped with D3, anything you do to it (.attr etc) will alter that SVG element.
d3.select(ReactFauxDOM.createElement('svg'))
// When you use things like .attr they return the original element, so this statement still returns the wrapped SVG.
d3.select(ReactFauxDOM.createElement('svg'))
.attr('width', width)
// If you use .append however, it'll change the chain to point to that new element, not the SVG!
d3.select(ReactFauxDOM.createElement('svg'))
.attr('width', width) // operates on svg
.append('g')
.attr('width', width) // operates on the g!
// So, if you want to hold onto your reference to the SVG, you must place the reference in a variable BEFORE you create any children.
var svg = d3.select(ReactFauxDOM.createElement('svg'))
.attr('width', width) // operates on svg
var g = svg.append('g')
This isn't a ReactFauxDOM thing, it's a D3 thing, but I hope this helped!
from react-faux-dom.
Two days! Ouch! I hope it's resolved soon. Just a hunch, but could it be this?
var chart = d3.select(ReactFauxDOM.createElement('svg'))
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', `translate(${40}, ${20})`);
That append looks suspicious, now chart
is equal to that g
tag, not the svg
. Try this instead.
var chart = d3.select(ReactFauxDOM.createElement('svg'))
.attr('width', width)
.attr('height', height)
chart
.append('g')
.attr('transform', `translate(${40}, ${20})`);
from react-faux-dom.
That seemed to have fixed the problem, Thank you so much @Olical! I'm not too experienced but I'm not sure what the difference is exactly/ why it behaves differently when seperated. How can I know/prevent in the future that I know whether the chart
or root node being operated on does not change when chaining?
from react-faux-dom.
@Olical, thank you for taking the time out to explain to me.
from react-faux-dom.
No problem, happy for me to close this now?
from react-faux-dom.
@Olical Yes, thank you again!
from react-faux-dom.
Hi, I'm having a very similar problem to @sandysaders. I'm trying to create a Treemap, and I've managed to do it inelegantly by directly manipulating the DOM with D3. I have tried to make it more React friendly by using your library, except that the same code when transformed to use your library doesn't display the treemap in question.
My transformed code:
var Chart = React.createClass({
render: function (){
var d3 = require('d3');
require("d3-selection-multi");
require("d3-scale");
var width = 960,
height = 1060;
var format = d3.format(",d");
var color = d3.scaleOrdinal()
.range(d3.schemeCategory10
.map(function(c) { c = d3.rgb(c); c.opacity = 0.6; return c; }));
var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
var treemap = d3.treemap()
.size([width, height])
.padding(1)
.round(true);
var faux = ReactFauxDom.createElement("div");
d3.csv("https://gist.githubusercontent.com/mbostock/6bbb0a7ff7686b124d80/raw/ad76dfe04750a81e108536aeee3fba8b3453fed4/flare.csv", type, function(error, data) {
if (error) throw error;
var root = stratify(data)
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.height - a.height || b.value - a.value; });
treemap(root);
var tNode = d3.select(faux).selectAll(".node")
.data(root.leaves())
.enter()
tNode.append("div")
.attr("class", "node")
.attr("title", function(d) { return d.id + "\n" + format(d.value); })
.style("left", function(d) { return d.x0 + "px"; })
.style("top", function(d) { return d.y0 + "px"; })
.style("width", function(d) { return d.x1 - d.x0 + "px"; })
.style("height", function(d) { return d.y1 - d.y0 + "px"; })
.style("background", function(d) { while (d.depth > 1) d = d.parent; return color(d.id); })
tNode.append("div")
.attr("class", "node-label")
.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1).split(/(?=[A-Z][^A-Z])/g).join("\n"); })
tNode.append("div")
.attr("class", "node-value")
.text(function(d) { return format(d.value); });
});
return faux.toReact()
}
});
The div that it's supposed to be in returns, but there's nothing inside of it. All that's shown is an empty div.
I'm assuming this is a problem with D3 as well, because the actual element seems to return to the console without issue. I tried implementing the fix you had described earlier above, but it was to no avail. The problem could very well be obvious, since I am also new to D3 and your library. Thank you so much for your help and for the library, @Olical!
I'm using Mike Bostock's tutorial for Treemap:
http://bl.ocks.org/mbostock/6bbb0a7ff7686b124d80
The code I had which functions:
var Chart = React.createClass({
render: function (){
var d3 = require('d3');
require("d3-selection-multi");
require("d3-scale");
var width = 960,
height = 1060;
var format = d3.format(",d");
var color = d3.scaleOrdinal()
.range(d3.schemeCategory10
.map(function(c) { c = d3.rgb(c); c.opacity = 0.6; return c; }));
var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
var treemap = d3.treemap()
.size([width, height])
.padding(1)
.round(true);
d3.csv("https://gist.githubusercontent.com/mbostock/6bbb0a7ff7686b124d80/raw/ad76dfe04750a81e108536aeee3fba8b3453fed4/flare.csv", type, function(error, data) {
if (error) throw error;
var root = stratify(data)
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.height - a.height || b.value - a.value; });
treemap(root);
var svg = d3.select("#graph").append("svg");
d3.select("#graph").selectAll(".node")
.data(root.leaves())
.enter().append("div")
.attr("class", "node")
.attr("title", function(d) { return d.id + "\n" + format(d.value); })
.style("left", function(d) { return d.x0 + "px"; })
.style("top", function(d) { return d.y0 + "px"; })
.style("width", function(d) { return d.x1 - d.x0 + "px"; })
.style("height", function(d) { return d.y1 - d.y0 + "px"; })
.style("background", function(d) { while (d.depth > 1) d = d.parent; return color(d.id); })
.append("div")
.attr("class", "node-label")
.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1).split(/(?=[A-Z][^A-Z])/g).join("\n"); })
.append("div")
.attr("class", "node-value")
.text(function(d) { return format(d.value); });
});
}
});
from react-faux-dom.
I'm on holiday at the moment, but at a quick glance I'd say it's because
the csv fetching method you're calling is asynchronous, whereas the render
function must be synchronous. You should fetch the csv ahead of time so
you're not relying on async callbacks.
On 14 Jul 2016 01:41, "navarr0" [email protected] wrote:
Hi, I'm having a very similar problem to @sandysaders
https://github.com/sandysaders. I'm trying to create a Treemap, and
I've managed to do it inelegantly by directly manipulating the DOM with D3.
I have tried to make it more React friendly by using your library, except
that the same code when transformed to use your library doesn't display the
treemap in question.My transformed code:
var Chart = React.createClass({
render: function (){
var d3 = require('d3');
require("d3-selection-multi");
require("d3-scale");var width = 960, height = 1060; var format = d3.format(",d"); var color = d3.scaleOrdinal() .range(d3.schemeCategory10 .map(function(c) { c = d3.rgb(c); c.opacity = 0.6; return c; })); var stratify = d3.stratify() .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); }); var treemap = d3.treemap() .size([width, height]) .padding(1) .round(true); var faux = ReactFauxDom.createElement("div"); d3.csv("https://gist.githubusercontent.com/mbostock/6bbb0a7ff7686b124d80/raw/ad76dfe04750a81e108536aeee3fba8b3453fed4/flare.csv", type, function(error, data) { if (error) throw error; var root = stratify(data) .sum(function(d) { return d.value; }) .sort(function(a, b) { return b.height - a.height || b.value - a.value; }); treemap(root); var tNode = d3.select(faux).selectAll(".node") .data(root.leaves()) .enter() tNode.append("div") .attr("class", "node") .attr("title", function(d) { return d.id + "\n" + format(d.value); }) .style("left", function(d) { return d.x0 + "px"; }) .style("top", function(d) { return d.y0 + "px"; }) .style("width", function(d) { return d.x1 - d.x0 + "px"; }) .style("height", function(d) { return d.y1 - d.y0 + "px"; }) .style("background", function(d) { while (d.depth > 1) d = d.parent; return color(d.id); }) tNode.append("div") .attr("class", "node-label") .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1).split(/(?=[A-Z][^A-Z])/g).join("\n"); }) tNode.append("div") .attr("class", "node-value") .text(function(d) { return format(d.value); }); });
return faux.toReact()
}
});The div that it's supposed to be in returns, but there's nothing inside of
it. All that's shown is an empty div.
[image: screen shot 2016-07-13 at 4 32 51 pm]
https://cloud.githubusercontent.com/assets/20448224/16823248/8ae9e30a-4917-11e6-9113-20e1e79976a5.pngI'm assuming this is a problem with D3 as well, because the actual element
seems to return to the console without issue. I tried implementing the fix
you had described earlier above, but it was to no avail. The problem could
very well be obvious, since I am also new to D3 and your library. Thank you
so much for your help and for the library!I'm using Mike Bostock's tutorial for Treemap:
http://bl.ocks.org/mbostock/6bbb0a7ff7686b124d80The code I had which functions:
var Chart = React.createClass({render: function (){
var d3 = require('d3'); require("d3-selection-multi"); require("d3-scale"); var width = 960, height = 1060; var format = d3.format(",d"); var color = d3.scaleOrdinal() .range(d3.schemeCategory10 .map(function(c) { c = d3.rgb(c); c.opacity = 0.6; return c; })); var stratify = d3.stratify() .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); }); var treemap = d3.treemap() .size([width, height]) .padding(1) .round(true); d3.csv("https://gist.githubusercontent.com/mbostock/6bbb0a7ff7686b124d80/raw/ad76dfe04750a81e108536aeee3fba8b3453fed4/flare.csv", type, function(error, data) { if (error) throw error; var root = stratify(data) .sum(function(d) { return d.value; }) .sort(function(a, b) { return b.height - a.height || b.value - a.value; }); treemap(root); var svg = d3.select("#graph").append("svg"); d3.select("#graph").selectAll(".node") .data(root.leaves()) .enter().append("div") .attr("class", "node") .attr("title", function(d) { return d.id + "\n" + format(d.value); }) .style("left", function(d) { return d.x0 + "px"; }) .style("top", function(d) { return d.y0 + "px"; }) .style("width", function(d) { return d.x1 - d.x0 + "px"; }) .style("height", function(d) { return d.y1 - d.y0 + "px"; }) .style("background", function(d) { while (d.depth > 1) d = d.parent; return color(d.id); }) .append("div") .attr("class", "node-label") .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1).split(/(?=[A-Z][^A-Z])/g).join("\n"); }) .append("div") .attr("class", "node-value") .text(function(d) { return format(d.value); }); });
}
});—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#47 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AATPXRtYYhFZWJQMYn05ucdCJdM84I0Hks5qVXewgaJpZM4I1xxB
.
from react-faux-dom.
Thank you for the advice. How would I go about doing that? Should I just make a function that stores the data into a global (via a call to d3.csv) before I call that class to render? I've also read that it would be possible to pre-load it all via d3.text, but I don't know whether that would work or not. Every time I have tried to pre-load it in via a global in the constructor, the data comes out as "undefined".
from react-faux-dom.
Related Issues (20)
- Append StyledComponents by d3? HOT 4
- Cannot append 'svg' properly with 'ReactFauxDOM' HOT 8
- Is it possible to get the stringified DOM? HOT 3
- Uncaught TypeError: (0 , _reactFauxDom.withFauxDOM) is not a function HOT 2
- Limitations HOT 2
- dangerouslySetInnerHTML - How can I set it? HOT 8
- getComputedTextLength() of a faux-element HOT 1
- Circle radius is NaN if adding d3 enter. HOT 9
- Failed to execute 'querySelector' on 'Document': '[object Object]' is not a valid selector. HOT 2
- Expose component propTypes and defaultProps.
- Expose component propTypes and defaultProps. HOT 2
- README may need update HOT 2
- TypeError: "text.node(...).getBBox is not a function" HOT 1
- Duplicate tick labels on axis update HOT 2
- d3.select(...).clone() report error HOT 2
- consider copy static properties to withFauxDOM HOC? HOT 1
- TypeError: node.compareDocumentPosition is not a function HOT 3
- minify react-faux-dom HOT 2
- Integrating React and d3.js with ReactFauxDOM displaying nothing on screen HOT 1
- componentWillMount deprecation HOT 4
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-faux-dom.