2016-06-23 2 views
0

D3とReactで試そうとしています。私はOliverCaldwellのFaux-Dom要素を使用しています。しかし、私はあなたが何かが足りないけど...."ReactFauxDOMが定義されていません"

import React from "react" 
import ReactDOM from "react-dom" 
import Faux from "react-faux-dom" 
import d3 from "d3" 

var Chart = React.createClass({ 
    propTypes: { 
    data: React.PropTypes.array 
    }, 
    render: function() { 
    var data = this.props.data 
    var margin = {top: 20, right: 20, bottom: 30, left: 50} 
    var width = 960 - margin.left - margin.right 
    var height = 500 - margin.top - margin.bottom 

    var parseDate = d3.time.format('%d-%b-%y').parse 

    var x = d3.time.scale() 
    .range([0, width]) 

    var y = d3.scale.linear() 
    .range([height, 0]) 

    var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient('bottom') 

    var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient('left') 

    var line = d3.svg.line() 
    .x(function (d) { return x(d.date) }) 
    .y(function (d) { return y(d.close) }) 

    var node = ReactFauxDOM.createElement('svg') 
    var svg = d3.select(node) 
    .attr('width', width + margin.left + margin.right) 
    .attr('height', height + margin.top + margin.bottom) 
    .append('g') 
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') 

    data.forEach(function (d) { 
     d.date = parseDate(d.date) 
     d.close = +d.close 
    }) 

    x.domain(d3.extent(data, function (d) { return d.date })) 
    y.domain(d3.extent(data, function (d) { return d.close })) 

    svg.append('g') 
    .attr('class', 'x axis') 
    .attr('transform', 'translate(0,' + height + ')') 
    .call(xAxis) 

    svg.append('g') 
    .attr('class', 'y axis') 
    .call(yAxis) 
    .append('text') 
    .attr('transform', 'rotate(-90)') 
    .attr('y', 6) 
    .attr('dy', '.71em') 
    .style('text-anchor', 'end') 
    .text('Price ($)') 

    svg.append('path') 
    .datum(data) 
    .attr('class', 'line') 
    .attr('d', line) 

    return node.toReact() 
    } 
}) 

function render (data) { 
    ReactDOM.render(React.createElement(Chart, { 
    data: data 
    }), document.getElementById('container')) 
} 

d3.tsv('./src/data.tsv', function (error, data) { 
    if (error) { 
    throw error 
    } 

    render(data) 
}) 

答えて

1

よ...

を私は愚かな「ReactFauxDOMが定義されていない」持っている。しかし、私は私のNPMは、右インストールやったと思いますだから、おそらくあなたは、この

var node = ReactFauxDOM.createElement('svg') 
を変更する必要がありません ReactFauxDOM

import Faux from "react-faux-dom" 

Fauxとしてそれをインポートしています10

var node = Faux.createElement('svg') 
+0

Okありがとうございます。まだ学んでいる。それは明らかだった:) –

関連する問題