confusing on className="brush"

[orkun]

I could not manage to construct className="brush" I was wondering what was the proper way to form className="brush" in the example code <div className="brush" style={{float: 'none'}}>

please let me know

regards

[codesuki]

Hi there! Can you show me some more of your code? Right now I don't understand what your are doing exactly.

[orkun]

Thank you first

I am new to React I try to integrate your brush example to my isomorphic server.

var MyComponent = React.createClass({ .. ,.

app.get('/', (request, response) => {

const reactHtml = ReactDOMServer.renderToString();

response.render('index',{reactInitialData: JSON.stringify(contacts), content: reactHtml });

the graph is rendered to client but brush is not working.

(my current thought is that the problem has to with rendering style). how did you inject your css file to client?

thank you

[codesuki]

I am not doing isomorphic rendering in my example. Can you show me how you create the brush?

[orkun]

var MyComponent = React.createClass({ ...

    return (
            <div style={sideColor} >
            <LineChart
               data={this.state.data}
               width={400}
               height={400}
               margin={{top: 10, bottom: 50, left: 50, right: 20}}
               xScale={this.state.xScale}
               xAxis={{tickValues: this.state.xScale.ticks(d3.time.day, 2), tickFormat: d3.time.format("%m /%d")}}
            />
            <div className="brush" style={{float: 'none'}}>
            <Brush
               width={400}
               height={50}
               margin={{top: 0, bottom: 30, left: 50, right: 20}}
               xScale={this.state.xScaleBrush}
               extent={[new Date(2015, 2, 10), new Date(2015, 2, 12)]}
               onChange={this._onChange}
               xAxis={{tickValues: this.state.xScaleBrush.ticks(d3.time.day, 2), tickFormat: d3.time.format("%m /%d")}}
            />
            </div>
            </div>
    );
},

---

on the server

app.get('/', (request, response) => { let componentInstance = ContactsAppFactory({contacts:contacts});

const reactHtml = ReactDOMServer.renderToString();

response.render('index',{reactInitialData: JSON.stringify(contacts), content: reactHtml });

But, I am not sure whether I am doing right on constructing the brush on the server. Is brush only client issue? However, Chrome inspect shows brush structure.

regards

[codesuki]

I never did server side rendering so I cannot say if that is the problem, sorry.

Otherwise this.state.xScaleBrush might be a source of error. Maybe if it's set incorrectly the brush might be rendered incorrectly. I am sorry I cannot help you more at the moment :(

[codesuki]

About the CSS..

I am using the following in the example. Maybe it helps you?

.brush .extent {
  stroke: #000;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

.brush .background {
  fill: #ddd;
}

If you didn't set the colors they might be white / invisible.

[orkun]

thank you for all