javascript - React中如何实现D3.selectAll.data.enter.append.transition.style

Question

全部:

我是React新手，想做一个基于D3.js的数据可视化应用，在D3中一个常见的情况是:

var color = d3.scale.category20();
d3.select("body" /*here is any parent root container, not just body*/)
    .data([1,2,3,4])
    .enter()
    .append("div")
    .style("background-color", function(d, i){
        return color(i); // just diff colors
    })
    .style("width", "0px")
    .style("height", "50px")
    .transition()
    .duration(800)
    .style("width", function(d, i){
        return (10+i*10)+"px";
    })
    .on("click", function(d,i){
        d3.select(this)
          .style("background-color", function(){
              return color(Math.floor(10*Math.random()));
          });
    });

这段代码片段涉及动态添加元素、静态样式、动态样式、动画，在数据可视化中很常见，但我有点困惑如何在 React 中实现这个简单的模式。

感谢任何示例。

Answer 1

示例代码:

class App extends React.Component {
  constructor() {
    super();
  }

  componentDidMount() {
    const color = d3.scale.category20();
    d3.select(this.refs.chart /*here is any parent root container*/ )
      .data([1, 2, 3, 4])
      .enter()
      .append("div")
      .style("background-color", function(d, i) {
        return color(i); // just diff colors
      })
      .style("width", "0px")
      .style("height", "50px")
      .transition()
      .duration(800)
      .style("width", function(d, i) {
        return (10 + i * 10) + "px";
      })
      .on("click", function(d, i) {
        d3.select(this)
          .style("background-color", function() {
            return color(Math.floor(10 * Math.random()));
          });
      });
  }



  render() {
    return ( <div>
      <div id="chart" ref="chart"></div>
      </div>
    )
  }
}

ReactDOM.render( <App /> , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>