react.js + d3.js v4 sankey出现错误：无法读取未定义的属性'nodes'

Question

我使用react.js渲染d3 v4 https://www.lua.org/pil/5.1.html。我的数据加载正常，但仍然出现错误：TypeError：无法读取sankey.js 39行中未定义的属性“ nodes”：

 function defaultNodes(graph) {
    return graph.nodes;
   }

当我导入sankey.js时，它也给我一个错误：未捕获的SyntaxError：意外的令牌<在d3.sankey.js：1处：不确定此未定义与此错误有关。  我的反应部分是这样的：

import React, { Component, PropTypes } from 'react';
import * as d3 from "d3";
import {sankey as sankeyGraph} from "d3-sankey";


class SandkeyGraph extends Component {
  displayName: 'SandkeyGraph';

  state = {
    sankeyData : null
  }

  PropTypes : {
    id : PropTypes.string,
    height: PropTypes.number,
    width: PropTypes.number
  }

  componentWillMount() {
    d3.queue()
    .defer(d3.json, "sankey.json")
    .await((error, sankeyData) => {
        this.setState({
           sankeyData
        });
    });
  }

  componentDidUpdate() {
    this.setContext();
  }

  setContext() {
    let units = "Widgets";
    const { height, width, id} = this.props;
    const margin = {top: 10, right: 10, bottom: 10, left: 10};
    const graph = this.state.sankeyData;

    // format variables
    let formatNumber = d3.format(",.0f"),    // zero decimal places
    format = function(d) { return formatNumber(d) + " " + units; },
    color = d3.scaleOrdinal(d3.schemeCategory20);


    let svg = d3.select(this.refs.sankey).append('svg')
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .attr('id', id)
                .append('g')
                .attr("transform", 
                    "translate(" + margin.left + "," + margin.top + ")");

    // Set the sankey diagram properties
    let sankey = sankeyGraph()
                .nodeWidth(36)
                .nodePadding(40)
                .size([width, height]);

    let path = sankey().link();

    sankey
      .nodes(graph.nodes)
      .links(graph.links)
      .layout(32);

    let link = svg.append("g").selectAll(".link")
      .data(graph.links)
      .enter().append("path")
      .attr("class", "link")
      .attr("d", path)
      .style("stroke-width", function(d) { return Math.max(1, d.dy); })
      .sort(function(a, b) { return b.dy - a.dy; });

      link.append("title")
        .text(function(d) {
            return d.source.name + " → " + 
                d.target.name + "\n" + format(d.value); });

      let node = svg.append("g").selectAll(".node")
          .data(graph.nodes)
          .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { 
          return "translate(" + d.x + "," + d.y + ")"; })
          .call(d3.drag()
          .subject(function(d) {
              return d;
            })
          .on("start", function() {
              this.parentNode.appendChild(this);
            })
          .on("drag", dragmove));

        node.append("rect")
        .attr("height", function(d) { return d.dy; })
        .attr("width", sankey.nodeWidth())
        .style("fill", function(d) { 
        return d.color = color(d.name.replace(/ .*/, "")); })
        .style("stroke", function(d) { 
        return d3.rgb(d.color).darker(2); })
        .append("title")
        .text(function(d) { 
        return d.name + "\n" + format(d.value); });

        node.append("text")
        .attr("x", -6)
        .attr("y", function(d) { return d.dy / 2; })
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .attr("transform", null)
        .text(function(d) { return d.name; })
        .filter(function(d) { return d.x < width / 2; })
        .attr("x", 6 + sankey.nodeWidth())
        .attr("text-anchor", "start");

        function dragmove(d) {
          d3.select(this)
            .attr("transform", 
                  "translate(" 
                     + d.x + "," 
                     + (d.y = Math.max(
                        0, Math.min(height - d.dy, d3.event.y))
                       ) + ")");
          sankey.relayout();
          link.attr("d", path);
        }
  }

  render() {
    const { sankeyData } = this.state;
    if (!sankeyData) {
      return null;
    }
    return (
      <div ref="sankey"></div>
    )
  }
}

export default SandkeyGraph;

谁能知道未定义什么节点属性？非常感谢您！