javascript - d3 svg 未在初始组件渲染上渲染。 react

Question

此组件作为页面 View 的一部分创建，用户可以从初始仪表板导航到该页面 View 。 svg 正确渲染所需的所有数据似乎都已正确记录，但在初始导航到此 View 时并未创建 SVG。该函数正在运行，但 html 中没有显示 SVG。起初我以为这是因为图像尚未加载，但 SVG 被附加到 div，而不是直接附加到图像，所以我认为它至少会显示在 html 减去宽度和高度中。任何帮助将不胜感激。

import React, { Component, PropTypes } from 'react';
import $ from 'jquery';
import { connect } from 'react-redux';

class BrainComponent extends Component {
  static propTypes = {
  showBrainData: PropTypes.bool.isRequired,
  showThisHitData: PropTypes.object,
  hit: PropTypes.object
};

constructor(props, context) {
    super(props, context);
    this.state = {
        showBrainData: this.props.showBrainData,
    };
}

componentWillMount() {
    console.log(this.props);
}

handleBrainVizColor() {
    console.log(this.props.hit.Hic);
    let colorString;
    const hic = this.props.hit.Hic;
    const redNum = 80 + (Math.round(hic / 2));
    const greeNum = 180 - (Math.round(hic / 2));
    colorString = "rgba(" + redNum + "," + greeNum + ", 0, .4)";
    return colorString;
}

renderBrainViz() {
    console.log(this.props.hit);
    this.renderRecangles();
}

componentDidMount() {
    // this.renderBrainViz.bind(this);
}

renderRecangles() {
    d3.select(".brain-canvas").remove();
    const fillColor = this.handleBrainVizColor();
    console.log(this.props.showBrainData);
    if (this.props.showBrainData) {
    const brainWidth = $(".brain-img").width();
    const brainHeight = $(".brain-img").height();
    let xLocation;
    let yLocation;
    let width = brainWidth / 2;
    let height = brainHeight / 2;
    console.log(this.props.hit.ImpactDirection);

    switch (this.props.hit.ImpactDirection) {
        case 'URP':
            xLocation = brainWidth / 2;
            yLocation = 0;
        break;
        case 'LRP':
            xLocation = 0;
            yLocation = brainHeight / 2;
            height += 10;
            break;
        case 'CR':
            break;
        case 'LR':
            xLocation = 0;
            yLocation = 0;
            width = brainWidth;
            break;
        case 'UR':
            xLocation = 0;
            yLocation = brainWidth / 2;
            width = brainWidth;
            break;
        case 'BA':
            break;
        case 'LF':
            xLocation = 0;
            yLocation = 0;
            width = brainWidth;
            break;
        case 'UF':
            xLocation = 0;
            yLocation = 0;
            width = brainWidth;
            break;
        case 'ULP':
            xLocation = 0;
            yLocation = 0;
            break;
        case 'LLP':
            xLocation = 0;
            yLocation = 0;
            break;
        }

    const brainCanvas = d3.select(".brain-one").append("svg")
                .attr("width", brainWidth)
                .attr("height", brainHeight)
                .attr("class", "brain-canvas");
    brainCanvas.append("rect")
            .attr("x", xLocation)
            .attr("y", yLocation)
            .attr("width", width)
            .attr("height", height)
            .style("fill", fillColor);
    }
}

render () {
        return (
          <div className="brain-container">
              <div className="brain-one">
                  <img className="brain-img" src="https://s3-us-west-2.amazonaws.com/mvtrak/new-brain.png" />
              </div>
              { this.renderBrainViz() }
              { !this.props.showBrainData ? <div>
                <div className="brain-overlay"></div>
                <div className="select-hit-text">SELECT HIT BELOW</div>
              </div> : null }
          </div>
    );
 }
}

function mapStateToProps(state) {
   console.log(state);
   return {
      hit: state.hitData
   };
}

export default connect(mapStateToProps)(BrainComponent);

Answer 1

正如您所展示的，从 render() 中调用 this.renderBrainViz() 是不合适的，因为在 render() 内部创建的 DOM 元素 此时仍然是影子 DOM 元素。它们只有在 render() 完成后才成为真正的 DOM 元素，并且 React 会区分这些影子 DOM 元素并将其实现为真正的 DOM。换句话说，第一次调用 render() 时，它又调用 this.renderBrainViz()，这一行:

d3.select(".brain-one").append("svg")

还没有.brain-one可供选择，因为它不存在。

它在第二次调用 render() 时起作用，因为此时 .brain-one 已经从第一次调用中存在，但这是一个幸运的巧合。我仍然认为它不同步。

正确的方法是永远不要从 render() 中调用 this.renderRectangles() ，而是从 componentDidUpdate() 中调用它也在 componentDidMount() 中，正如您注释掉的那样。 (那里不需要使用 .bind())。

此外，虽然从 renderRectangles() 中调用 d3.select(".brain-one") 可能没问题，但如果有的话就会出现问题存在多个 BrainComponent，因为这样就会有多个 .brain-one，d3 会选择遇到的第一个。更好的方法是使用 React 的 ref 功能来设置对 .brain-one 的引用:

<div className="brain-one" ref="brainOne">

这样，你就可以做类似的事情

d3.select(this.refs.brainOne).append("svg")

最后，在 renderRectangles() 中，总是删除并重新创建 .brain-canvas 可能不是一个好主意。相反，您永远不应该删除它，只有在它不存在时才有条件地创建它。您可以检查 .brain-canvas 是否存在，如下所示:

if(d3.select(this.refs.brainOne).select('.brain-canvas').empty()) {
  // means it doesn't exist
}

或者，您可以使用某种技巧，根据它是否已存在，使用以下命令返回大小为 1 或 0 的 .enter() 集:

d3.select(this.refs.brainOne).selectAll('.brain-canvas')
  .data([null]) // bind to a data array of 1 element
.enter()
  .append('svg') // will only append the svg if it doesn't exist yet
  .attr('class', 'brain-canvas')
  ....