Question

我正在尝试整合D3和React。两种技术都是新的。所以我的问题陈述是输入输入数据然后导致形成数据数组。我将这些数据集合到条形图可视化中。

App组件如下所示：

class App extends Component {

constructor(props) {
  super(props);
  this.state = {
    chart_data: []
  }
this.setData = this.setData.bind(this);
}

setData(data) {
  this.setState({chart_data: data});
}

render() {
  return (
    <div>
      <Form setData={this.setData} />
      <Chart uid="chart-1" data={this.state.chart_data} />
    </div>
  );
}
}

export default App;

图表组件如下所示：

import React, { Component } from 'react';
import * as d3 from 'd3';

class Chart extends Component {

componentDidMount() {
  d3.select(this.node).append("svg").attr("height", 400).attr("width", 440)
}

componentDidUpdate() {
  this.renderChart(this.props.data);
}

renderChart(data) {

  var dataArray = data;
  var minDataElem = Math.min(...dataArray);
  var maxDataElem = Math.max(...dataArray);

  var width = 400;

  var scaleHeight = d3.scaleLinear()
                      .domain([minDataElem, maxDataElem])
                      .range([1, 200]);

  var scaleWidth = d3.scaleBand()
                      .domain(dataArray.map(function (d, i) { return i; }))
                      .rangeRound([0, width])
                      .paddingInner(0.1)
                      .paddingOuter(0.5);

  var yAxisScale = d3.scaleLinear()
                     .domain([minDataElem, maxDataElem])
                     .range([200, 0]);

  var xAxisScale = d3.scaleLinear()
                     .domain([0, dataArray.length])
                     .range([0, width])

  var yAxis = d3.axisLeft(yAxisScale);
  var xAxis = d3.axisBottom(xAxisScale).ticks(dataArray.length);

  var barCanvas = d3.select("svg")
                    .append("g").attr("transform", "translate(50, 50)");;

  barCanvas.call(yAxis);

  barCanvas.append("g")
              .attr("transform", "translate(0, 200)")
            .call(xAxis);

  barCanvas.selectAll("rect")
           .data(dataArray, function(d, i) { return '' + i + '-' + d; })
           .enter()
           .append("rect")
              .attr("height", function(d) { return scaleHeight(d); })
              .attr("width", function () { return scaleWidth.bandwidth(); })
              .attr("fill", "steelblue")
              .attr("x", function(d, i) { return scaleWidth(i); })
              .attr("y", function(d) { return (200-scaleHeight(d)) });

  barCanvas.exit().remove();
}

render() {
  return <div ref={node => this.node = node} className={this.props.uid} >
  </div>;
}
}

export default Chart;

因为，App组件还嵌入了Form Component，以下是它的简短描述：它包含3个输入字段 - Principle Amount，Interest of Interest和Years of Years。这些输入字段将导致Future Value评估，该评估使用一些数学公式计算。对其求值的函数返回一个未来值数组，然后将其作为道具传递给呈现图表的图表组件。

现在，我面临数据更新的问题（即如果在第一次通过输入第一组数据渲染图表后，我输入另一组输入数据并点击提交按钮）我得到了图表的重叠

相反，我希望第一个图表数据得到更新。我认为这个问题与D3进入更新退出有关。

解决方法的工作原理是完全刷新图表然后重新渲染它。但这错过了整合D3和React的全部观点。

我们如何解决这个问题？

集成D3.js和React.js。面对数据更新重叠的图表

0 个答案: