javascript - 为什么当输入类型改变时这个 d3 组件不起作用？

Question

我正在关注 this tutorial for React and d3 ，现在我正在尝试使用状态遵循的模式。

我正在更改提供初始状态的函数

var randomData = [];
d3.range(settings.numDataPoints).forEach(function() {
      var newNumber1 = Math.floor(Math.random() * settings.maxRange());
      var newNumber2 = Math.floor(Math.random() * settings.maxRange());
      randomData.push([newNumber1, newNumber2]);
    });

到

var randomData = d3.range(settings.numDataPoints).map(function(thisPoint) {
      var newNumber1 = Math.floor(Math.random() * settings.maxRange());
      var newNumber2 = Math.floor(Math.random() * settings.maxRange());
      return {ind: thisPoint, coords: [newNumber1, newNumber2]};
    });

因此，我还必须更改 DataCircles renderCircles() 函数

  renderCircles: function(coords) {
    var props = {
      cx: this.props.xScale(coords[0]),
      cy: this.props.yScale(coords[1]),
      r: 2,
      key: uuid.v4()
    };
    return (
      <circle {...props}>
      </circle>
    );
  }

至

  renderCircles: function(coordsObj) {
    var props = {
      cx: this.props.xScale(coordsObj.coords[0]),
      cy: this.props.yScale(coordsObj.coords[1]),
      r: 2,
      key: uuid.v4()
    };
    return (
      <circle {...props}>
      </circle>
    );
  }

这会导致教程中创建的 XY 网格上所有先前渲染良好的点消失，只留下空白图形:

我已经记录了两个函数作用域中的对象，并验证了数据是否正确生成。这是怎么回事？

Answer 1

您正在更改 randomData 的结构，我认为您错过了它也是 <ScatterPlot /> 的支柱。组件，因此您还需要更新它:

getXScale: function(props) {
  var xMax = d3.max(props.data, function(d) { return d.coords[0] });
  return d3.scale.linear()
    .domain([0, xMax])
    .range([props.padding, props.width - props.padding * 2]);
},

getYScale: function(props) {
  var yMax = d3.max(props.data, function(d) { return d.coords[1] });
  return d3.scale.linear()
    .domain([0, yMax])
    .range([props.height - props.padding, props.padding]);
},