Confuse о перекрытии и столкновения между React и D3

Question

Все:

Я довольно новыми для React, что я пытаюсь сделать, это превратить D3 визуализации данных диаграммы в React компонент, но есть один путает:

Я не совсем понимаю, РЕАКТ virtualDOM, но одна вещь, которую я считаю, D3 не может непосредственно делать операцию на нем (только в режиме реального DOM можно управлять с помощью D3, не так ли?), то возникает вопрос:

Как может мы в полной мере используем React? Если это не так, может кто-нибудь показать мне код, который использует как D3 и virtualDOM, чтобы сделать схему с операцией обновления данных и переходом анимации

Благодарность

Answer 1

Вы правильно, что D3 не работает на React виртуальных DOM, и поэтому D3 не может непосредственно взаимодействовать с реакцией. Это несчастливо, но по существу есть два пути.

1) Заставьте его работать на виртуальном куполе. react-faux-dom хорошо справляется с этим и делает много работы D3 понятной в контексте реакции. https://github.com/Olical/react-faux-dom

2) Используйте спасательный люк и непосредственно управляйте им. По существу, перехватите новые реквизиты в componentWillReceiveProps и установите shouldComponentUpdate, чтобы всегда возвращать false. Оттуда возьмите данные от componentWillRecieveProps и сделайте то, что хотите, с dom refs для элементов d3.

Ни в одном случае особо красивый. Существует не идеальное решение для выполнения D3 внутри реагирующих приложений.

Answer 2

Существует подход, в котором React обрабатывает реальные элементы SVG и D3, просто делая математику. Пример из интернета:

class Line extends React.Component { 
    static contextTypes = { 
     xScale: React.PropTypes.func, 
     yScale: React.PropTypes.func 
    }; 

    render() { 
     let path = d3.svg.line() 
         .interpolate("linear") 
         .x(d => this.context.xScale(d.x)) 
         .y(d => this.context.yScale(d.y)); 

     return (
      <path d={path(this.props.data)} 
        stroke="#0077CC" 
        strokeWidth="3" 
        fill="none" /> 
     ); 
    } 
} 

class Chart extends React.Component { 
    static propTypes = { 
     width: React.PropTypes.number, 
     height: React.PropTypes.number, 
     data: React.PropTypes.shape({ 
      x: React.PropTypes.number.isRequired, 
      y: React.PropTypes.number.isRequired 
     }).isRequired 
    }; 

    static defaultProps = { 
     width: 400, 
     height: 200 
    }; 

    static childContextTypes = { 
     xScale: React.PropTypes.func, 
     yScale: React.PropTypes.func 
    }; 

    getChildContext() { 
     return { 
      xScale: this.getXScale(), 
      yScale: this.getYScale() 
     } 
    } 

    getXScale() { 
     return d3.scale.linear() 
       .domain(d3.extent(this.props.data, d => d.x)) 
       .range([0, this.props.width]); 
    } 

    getYScale() { 
     return d3.scale.linear() 
       .domain(d3.extent(this.props.data, d => d.y)) 
       .range([this.props.height, 0]); 
    } 

    render() { 
     return (
      <svg style={{ width: this.props.width, height: this.props.height }}> 
       <Line data={this.props.data} /> 
      </svg> 
     ); 
    } 
} 

Answer 3

Я считаю, самое простое, что нужно сделать, это загрузить визуализацию d3 внутри React компонента с componentDidMount(). Затем вы можете (в пределах кода d3) получить доступ к свойствам React и состоянию, передавая данные между ними. Here is an example.