I want to disable that first animation, because it leeks the browser in big graphs.
The documentation is frightful and I don't what to use d3 force layout, I want to keep webcola.
Thanks
I am trying to get my head around d3 in its current version 4. Specifically: I a trying to create the x axis for a simple line chart in react and es6.
I have seen the examples of Mike Bostock and how he does it:
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
But that is neither react nor ES6.
On another site I have seen the following variant:
renderAxis() {
var node = this.refs.axis;
var axis = d3.svg.axis().orient(this.props.orient).ticks(5).scale(this.props.scale);
d3.select(node).call(axis);
}
render() {
return <g className="axis" ref="axis" transform={this.props.translate}></g>
}
This is react and ES6 but not d3 in version 4.
I could try to adopt the version 3 code to version 4 of d3 but: The d3.select bothers me extremely. I don't want to make DOM-calls when I am using react (or some other library within, like d3). React should be used to render into the DOM in the most efficient way, not to get me DOM nodes.
So, my question is:
What is the react-way to create me a simple x axis? Or, if there is yet not such an answer: What is the react way to adopt the quoted code of Mike Bostock?
After a couple years of trying to figure out d3 in React, this is the best way my team and I have found of doing axes:
const Axis = props => {
const axisRef = axis => {
axis && props.axisCreator(select(axis));
};
return <g className={props.className} ref={axisRef} />;
};
Notes
axisCreator is the function returned by axisBottom, axisLeft, etc. It is created outside the component to expose to the user the full power of the d3-axis library.
className allows the user to style the axis however he or she wants.
This example uses refs, which the React docs caution against, but it uses refs to integrate with a third-party DOM library, which is one of the reasons to use refs that the React docs call out specifically.
It is understandable that using d3's select bothers you, but it's required if you want to let d3 manipulate the DOM, and if you don't let d3 manipulate the DOM, you lose out on all the functionality of d3 (which is an incredibly cool library).
If you are using React then you are pretty much giving control of how the DOM works to React because of it's internal workings. React will render your components inside a virtual DOM tree and then figure out the difference between the DOM tree in the page were you inserted the root component and the former. It will apply the difference between the two trees so that the tree in the page will look like the virtual one.
Mixing d3 and React requires a bit of a trick. All the elements you use d3 for (nodes or attributes) should not be owned by React. Otherwise weird stuff happens. Let's say your transform attribute for the g.axis node is set by d3, that implies that you don't render it in React. You let your d3 logic have exclusive ownership of it.
Now comes the next step. If you want to use other tools to describe DOM nodes then you got to put that logic inside componentWillMount and componentDidUpdate. Basically you only render the g element inside the render() method of React and then inside those two React lifecycle handles you can change the attributes of the g element and what's inside.
I will point you towards this post that goes a bit more in detail about the hows, but I would also like to give my two cents. From my perspective and experience with these two it is best to only use d3 for it's helper functions (generic math functions). Let the rendering logic (DOM composition) be done purely in React even though there's code duplication that arises. It is way easier to maintain code that is consistent and that doesn't have two different approaches to rendering mixed together.
TL;DR; Either give attributes or nodes ownership to either React or d3 for them to work together; or my recommendation, make your own axis component in React that outputs the same DOM elements as the d3 one (or different if you desire other functionality or style) and don't use d3 for rendering.
Hope I helped.
The code for rendering axis using React directly, rather than d3's select API, is actually not that complex. react-d3-axis provides a pretty simple, ~100 loc implementation. Going this approach lets you use d3 for stuff like data transformations and scale interpolation, and use React for rendering.
I started integrating React with D3 where I use React for the DOM and D3 for the math. My use case is creating a Tree Chart where the children are collapsible.
Since I'm using React for rendering the DOM, I am trying to use setState to trigger a rerendering for the "collapsed" children nodes, but I am encountering some problems.
1. It does not properly orient the nodes and paths
2. When I "expand" the child nodes they are placed in the wrong place
This is the initial state of the tree. Everything looks fine
Then I click on Level2: A and it collapses its children but the nodes and paths are out of place
Then when I collapse Top Level while Level2: A is collapsed and expand it I get the following
Here is a link to my code: http://codepen.io/anon/pen/vNQqoQ. If anyone has any insights it would be very appreciated.
Thanks
Just add a couple of \u00A0 (backslash uA00A0) to the text in the children object to insert space at the start of the text
I'm working on a dashboard (in Ruby) with rotating views where each set of data includes a D3 visualization.
For the final visualization, I want to pull the circles into a heart shape. I can use a force layout to pull them into a circle (similar to the Obama Budget example), but I haven't had success modifying that into other shapes.
I've read through all the d3 force layout Q&As on Stack Overflow as well as going through related D3 tutorials online.
Does anyone have suggestions for how to do this with D3 (or another tool/library)?
Potential options I'm currently researching:
1) Custom svg "canvass" shape
2) Append to heart-shaped div (found one made with :before/:after pseudo selectors but it currently will only display nodes in the before section)
I want to add zooming functionality using d3.js in a bar chart created using dimple.js. See following link for what I did so far. http://jsbin.com/rejof/2/edit
I want to combine both zooming functionality in dimple chart. Thanks in advance.
I don't think you can easily do this, you would probably need to modify the dimple source code as I believe zooming relies on a different dom structure to the one dimple uses. You might find it easier to recreate the chart you require in raw d3, rather than modifying a dimple chart to zoom. Of course I'd love to be proven wrong.