javascript - 图未呈现 - Dagre-d3

Question

我转换了这个 Dagre-D3演示到 React 组件。

我使用的代码如下所示:

import React from 'react';
import * as d3 from "d3";
import * as dagreD3 from 'dagre-d3';
import * as dagre from "dagre";

export default class KafkaFlow extends React.Component {
    constructor () {
        super();
    }

componentDidMount() {
    // Create the input graph
        let g = new dagreD3.graphlib.Graph().setGraph({});

        // Set an object for the graph label
        g.setGraph({});

        // Default to assigning a new object as a label for each new edge.
        g.setDefaultEdgeLabel(function () {
            return {};
        });

        // Add nodes to the graph. The first argument is the node id. The second is
        // metadata about the node. In this case we're going to add labels to each of
        // our nodes.
        g.setNode("kspacey", {label: "Kevin Spacey", width: 144, height: 100});
        g.setNode("swilliams", {label: "Saul Williams", width: 160, height: 100});
        g.setNode("bpitt", {label: "Brad Pitt", width: 108, height: 100});
        g.setNode("hford", {label: "Harrison Ford", width: 168, height: 100});
        g.setNode("lwilson", {label: "Luke Wilson", width: 144, height: 100});
        g.setNode("kbacon", {label: "Kevin Bacon", width: 121, height: 100});

        // Add edges to the graph.
        g.setEdge("kspacey", "swilliams");
        g.setEdge("swilliams", "kbacon");
        g.setEdge("bpitt", "kbacon");
        g.setEdge("hford", "lwilson");
        g.setEdge("lwilson", "kbacon");

        dagre.layout(g);

    // Create the renderer
    let render = new dagreD3.render();

    // Set up an SVG group so that we can translate the final graph.
     let svg=d3.select(ReactDOM.findDOMNode(this.refs.nodeTree));

    // Run the renderer. This is what draws the final graph.
    render(d3.select(ReactDOM.findDOMNode(this.refs.nodeTreeGroup)), g);

    svg.attr("height", g.graph().height + 40);
}

render() {
    return (
        <svg id="nodeTree" ref={(ref) => this.nodeTree=ref} width="960" height="600"><g ref={(r) =>this.nodeTreeGroup=r}/></svg>
    )
    };
}

当我执行这段代码时，没有生成图表。控制台中也没有错误。我找不到原因。有什么想法吗？

Answer 1

首先，对于这种具体的问题，如果你用codepen或者jsfiddle创造一个环境让别人看，通常更容易让人理解和帮助你。

我认为当我第一次尝试您的代码时控制台上肯定有错误。也许您使用的是较新版本的 chrome，它会隐藏控制台消息，除非您单击左侧的展开按钮。这是工作代码。

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

  componentDidMount() {
    // Create the input graph
    let g = new dagreD3.graphlib.Graph().setGraph({});
    // Set an object for the graph label
    g.setGraph({});

    // Default to assigning a new object as a label for each new edge.
    g.setDefaultEdgeLabel(function () {
      return {};
    });

    // Add nodes to the graph. The first argument is the node id. The second is
    // metadata about the node. In this case we're going to add labels to each of
    // our nodes.
    g.setNode("kspacey", { label: "Kevin Spacey", width: 144, height: 100 });
    g.setNode("swilliams", { label: "Saul Williams", width: 160, height: 100 });
    g.setNode("bpitt", { label: "Brad Pitt", width: 108, height: 100 });
    g.setNode("hford", { label: "Harrison Ford", width: 168, height: 100 });
    g.setNode("lwilson", { label: "Luke Wilson", width: 144, height: 100 });
    g.setNode("kbacon", { label: "Kevin Bacon", width: 121, height: 100 });

    // Add edges to the graph.
    g.setEdge("kspacey", "swilliams");
    g.setEdge("swilliams", "kbacon");
    g.setEdge("bpitt", "kbacon");
    g.setEdge("hford", "lwilson");
    g.setEdge("lwilson", "kbacon");

    // don't know where is dagre coming from
    //dagre.layout(g);

    // Create the renderer
    let render = new dagreD3.render();

    // Set up an SVG group so that we can translate the final graph.
    let svg = d3.select(this.nodeTree);

    // Run the renderer. This is what draws the final graph.
    render(d3.select(this.nodeTreeGroup), g);

    svg.attr("height", g.graph().height + 40);
  }

  render() {
    return (
      <svg
        id="nodeTree"
        ref={(ref) => { this.nodeTree = ref; }}
        width="960"
        height="600"
      >
        <g ref={(r) => { this.nodeTreeGroup = r; }} />
      </svg>
    );
  }
}

演示:https://codepen.io/anon/pen/vRWZmL?editors=0011

最大的问题是滥用 ReactDOM.findDOMNode(this.refs.nodeTree)。因为您使用回调函数来设置类的属性。 this.refs 将不包含任何内容，因为我们没有使用在 ref 中使用字符串的旧版 api。

参见 https://reactjs.org/docs/refs-and-the-dom.html有关 React 中的 refs 的更多详细信息。