-
Notifications
You must be signed in to change notification settings - Fork 87
Support for Brush #4
Comments
Can you post any code examples? It'd be great to see how this works. I haven't explored the full D3 API yet so some things are still new to me. One thing I found was that you can't use I'll see what I can do with some more context, but there will be things that just don't work because of the nature of React. Well, we can get anything working but it'd probably require changes to the actual D3 source, some things can't be faked I think. As a guess, I'd say |
Sure, import d3 from 'd3';
import React, { Component } from 'react';
import ReactFauxDOM from 'react-faux-dom';
export default class Graph extends Component {
render() {
const { data } = this.props
let width = 750,
height = 100,
margin = {
top: 20,
right: 20,
bottom: 20,
left: 50
};
const node = ReactFauxDOM.createElement('svg')
const svg = d3.select(node)
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
var x = d3.time.scale()
.range( [0, width] )
.domain( [data[0].date, data[data.length-1].date] );
var y = d3.scale.linear()
.range( [height, 0] )
.domain( [0, 20] );
var line = d3.svg.line()
.interpolate("basis")
.x(function(d){ return x(d.date); })
.y(function(d){ return y(d.data); });
var area = d3.svg.area()
.interpolate("basis")
.x(function(d){ return x(d.date); })
.y1(function(d){ return y(d.data); })
.y0(function(d){ return y(0); });
var brush = d3.svg.brush().x(x);
var focus = svg.append("g");
focus.append("path")
.attr("class", "area")
.style({"fill": "#ccc"})
.datum(data)
.attr("d", area);
focus.append("path")
.attr("class", "line")
.style({
"fill": "none",
"stroke": "#000",
"stroke-width": "2"
})
.datum(data)
.attr("d", line);
focus.append("g")
.attr("class","x brush")
.call(brush.extent([data[7].date,data[11].date]))
.selectAll("rect")
.attr("height", height)
.style({
"fill": "#69f",
"fill-opacity": "0.3"
});
console.log(node);
return node.toReact()
}
}
var data =
[
{date: new Date(2015, 2, 5), data: 1},
{date: new Date(2015, 2, 6), data: 2},
{date: new Date(2015, 2, 7), data: 0},
{date: new Date(2015, 2, 8), data: 3},
{date: new Date(2015, 2, 9), data: 2},
{date: new Date(2015, 2, 10), data: 2},
{date: new Date(2015, 2, 11), data: 3},
{date: new Date(2015, 2, 12), data: 3},
{date: new Date(2015, 2, 13), data: 3},
{date: new Date(2015, 2, 14), data: 2},
{date: new Date(2015, 2, 15), data: 3},
{date: new Date(2015, 2, 16), data: 3},
{date: new Date(2015, 2, 17), data: 6}
]
React.render(
React.createElement(Graph, {data: data}),
document.getElementById('mount-chart')
) What I noticed is that the |
Brush is definitely important for dynamic charts. It is the last piece to prevent me from coding dc.js like charts. |
How to use a bush to pick up specific data is the next problem. I did not understand brush internally, so can not figure out. |
It seems this project is a good example. https://github.com/react-d3/react-d3-brush |
I'm trying to figure out how to do this too. I guess I could do a custom brush using react, but this would force me to recode a brush while d3 has a native one. |
It should be something along the lines of this. (although I haven't checked yet!)
The core of this issue, as far as I can tell, reaches further than brush. You can't use A lot of this project has been about just fixing one small thing and then suddenly a whole host of things in D3 start working. Small changes can have a huge impact. I think events are the first place to start. |
@KeitIG What I found two days ago is not a solution in @Olical 's sense. It uses d3.brush() directly. https://github.com/mbostock/d3/blob/78e0a4bb81a6565bf61e3ef1b898ef8377478766/src/svg/brush.js |
As you can see from here https://github.com/mbostock/d3/blob/78e0a4bb81a6565bf61e3ef1b898ef8377478766/src/svg/brush.js#L30-L31 there's some odd events being added. These are the kind of things we need to shim in order for this to work. And things like this, because I'm pretty sure If we can handle those weird looking events and get |
Dear @sxywu |
Hey @Olical ! sorry to bother you, but do you think you will be able to fix this soon ? To know if I have to switch back to a classic |
I'm on holiday next week but will bring my laptop, so I may have a play with it while I'm away. I can't promise I'll be able to support it just yet though so going back to the original solution is probably a good idea for now. Keep and eye on this for when I do fix it though! I'm hoping it won't take long. |
Brushing would be super cool. I am following this example, my code is following:
And I first get a warning in the console: Warning: Unsupported vendor-prefixed style property webkitTapHighlightColor. Did you mean WebkitTapHighlightColor? And when I actually try to brush it throws an error: Uncaught TypeError: Cannot use 'in' operator to search for 'userSelect' in undefined in d3.js at line 471 |
That's an interesting example, thanks for sharing. The webkit error is just to do with the way I'm camel casing the style properties, fairly easy to fix. Not sure what |
This is something that someone noticed in #4 which could also contribute to it sometimes. Gradually fixing all of these little unrelated issues to make stuff like brush finally work. I should help with future animation and force directed graph work too.
@juanpr2 I actually think this may work now, I can't see why not now I've fixed events and few other bits. I think your main problem is that Just make sure any stateful things are outside of the render function and they should work. Apart from animation, I'm not sure if that's possible at all, but you can use React animation libraries, so it's not so bad. Still requires investigation. |
I ended up writing my own React components and I am using D3 just to do the calculations everything else is React's responsibility. It was not that hard, I had to write my own brushing component but at the end I am super happy to have it all the reactive way. |
@RassaLibre I'm glad you found a solution! :) I'm still going to try and get D3's brushing working though, I'm sure it's possible. I need some more long train journeys to work on this... |
I'm looking into this at the moment, I have what should be a working example but it looks like |
Oh, I see, because it's trying to add |
I think setting the ownerDocument to itself may actually do the trick. I'll try it when I get back from dinner :) |
I also got an error when I tried to use d3 brush- Any luck folks with the fix? |
@vikrammirla That should have been fixed by this PR a while ago? #16 |
I'm afraid I'm going to close this (among other issues), the reason is stated in the new limitations section in the readme (PR #30). This is essentially a question of state management which is illustrated in my lab with a simple example. The principal is essentially the same though! |
I'm trying to implement a Brush in a chart, but I get an
undefined is not a valid argument for 'in' (evaluating 'name in object')
error from the ReactEventListener.I believe the cause is the brush event from d3.
Could this be implemented in the react-faux-dom?
The text was updated successfully, but these errors were encountered: