實例做出反應有關如何實現D3的.transition（）時間（）緩解（）等

Question

所有：。

如標題所說，我試圖建立它可以接受過渡/時間/便於組件道具爲數據可視化項目實現動畫過渡（主要用於切換數據集）。

我不知道，如果一個組件是實現這一目標的反應，如果沒有請告知沒有辦法做到這一點作出反應正確的方式。

感謝

Answer 1

，試圖利用這兩個庫一起不幸的是他們與DOM的交互方式。

D3直接選擇元素，然後將數據綁定到這些元素，並根據數據集添加，更新或移除元素。

陣營喜歡有代表的一切在它的虛擬DOM，沒有它的同意，不喜歡實際的DOM的任何變化。

有些人會通過禁用某些生命週期方法和使用功能性副作用來完成D3的方法來解決這個問題。

class ExpenseComponent extends React.Component { 
    componentDidMount() { 
    // wrap element in d3 
    this.d3Node = d3.select(this.getDOMNode()); 
    this.d3Node.datum(this.props.data) 
     .call(ExpenseVisualization.enter); 
    }, 

    shouldComponentUpdate(nextProps) { 
    if (nextProps.data.update) { 
     // use d3 to update component 
     this.d3Node.datum(nextProps.data) 
     .call(ExpenseVisualization.update); 
     return false; 
    } 
    return true; 
    }, 

    componentDidUpate() { 
    this.d3Node.datum(this.props.data) 
     .call(ExpenseVisualization.update); 
    }, 

    render() { 
    // … 
    } 
} 

雖然這適用於某些情況，但您將失去將狀態傳遞給組件可能呈現的任何子組件的好處。

我建議研究一些人如何試圖解決這個問題，這些方法，看問題的根源。

而且，隨意試用這個庫我的朋友和我做，可讓您在現有D3代碼插入原樣，並返回反應的組分，並處理過渡，動畫，定時器等

http://react-d3-library.github.io/

一直在尋找更多反饋！