Javascript 图表未呈现-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>
    )
    };
}

从“React”导入React；
从“d3”导入*作为d3；
从“dagre-d3”导入*作为dagreD3；
将*作为dagre从“dagre”导入；
导出默认类KafkaFlow扩展React.Component{
构造函数（）{
超级（）；
}
componentDidMount（）{
//创建输入图形
设g=new dagreD3.graphlib.Graph（）.setGraph（{}）；
//设置图形标签的对象
g、 集合图（{}）；
//默认情况下，为每个新边指定一个新对象作为标签。
g、 setDefaultEdgeLabel（函数（）{
返回{}；
});
//向图中添加节点。第一个参数是节点id。第二个参数是
//关于节点的元数据。在本例中，我们将向每个节点添加标签
//我们的节点。
g、 setNode（“kspacey”，{标签：“Kevin Spacey”，宽度：144，高度：100}）；
g、 setNode（“swilliams”，{标签：“Saul Williams”，宽度：160，高度：100}）；
g、 setNode（“bpitt”{标签：“布拉德·皮特”，宽：108，高：100}）；
g、 setNode（“hford”{标签：“Harrison Ford”，宽：168，高：100}）；
g、 setNode（“lwilson”，{标签：“Luke Wilson”，宽度：144，高度：100}）；
g、 setNode（“kbacon”，{标签：“Kevin Bacon”，宽：121，高：100}）；
//将边添加到图形中。
g、 setEdge（“kspacey”、“swilliams”）；
g、 setEdge（“swilliams”、“kbacon”）；
g、 setEdge（“bpitt”、“kbacon”）；
g、 setEdge（“hford”、“lwilson”）；
g、 setEdge（“lwilson”、“kbacon”）；
布局图（g）；
//创建渲染器
让render=new dagreD3.render（）；
//设置一个SVG组，以便我们可以翻译最终的图形。
让svg=d3.select（ReactDOM.findDOMNode（this.refs.nodeTree））；
//运行渲染器。这是绘制最终图形的步骤。
render（d3.select（ReactDOM.findDOMNode（this.refs.nodeTreeGroup）），g）；
attr（“height”，g.graph（）.height+40）；
}
render（）{
返回(
this.nodeTree=ref}width=“960”height=“600”>this.nodeTreeGroup=r}/>
)
};
}

---

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

首先，对于这种特定的问题，如果您使用codepen或JSFIDLE为其他人创建一个查看环境，人们通常会更容易理解和帮助您

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

类KafkaFlow扩展了React.Component{ 构造函数（）{ 超级（）； } componentDidMount（）{ //创建输入图形 设g=new dagreD3.graphlib.Graph（）.setGraph（{}）； //设置图形标签的对象 g、 集合图（{}）； //默认情况下，为每个新边指定一个新对象作为标签。 g、 setDefaultEdgeLabel（函数（）{ 返回{}； }); //向图中添加节点。第一个参数是节点id。第二个参数是 //关于节点的元数据。在本例中，我们将向每个节点添加标签 //我们的节点。 g、 setNode（“kspacey”，{标签：“Kevin Spacey”，宽度：144，高度：100}）； g、 setNode（“swilliams”，{标签：“Saul Williams”，宽度：160，高度：100}）； g、 setNode（“bpitt”{标签：“布拉德·皮特”，宽：108，高：100}）； g、 setNode（“hford”{标签：“Harrison Ford”，宽：168，高：100}）； g、 setNode（“lwilson”，{标签：“Luke Wilson”，宽度：144，高度：100}）； g、 setNode（“kbacon”，{标签：“Kevin Bacon”，宽：121，高：100}）； //将边添加到图形中。 g、 setEdge（“kspacey”、“swilliams”）； g、 setEdge（“swilliams”、“kbacon”）； g、 setEdge（“bpitt”、“kbacon”）； g、 setEdge（“hford”、“lwilson”）； g、 setEdge（“lwilson”、“kbacon”）； //不知道dagre是从哪里来的 //布局图（g）； //创建渲染器 让render=new dagreD3.render（）； //设置一个SVG组，以便我们可以翻译最终的图形。 让svg=d3.select（this.nodeTree）； //运行渲染器。这是绘制最终图形的步骤。 渲染（d3.select（this.nodeTreeGroup），g）； attr（“height”，g.graph（）.height+40）； } render（）{ 返回( {this.nodeTree=ref；}} 宽度=“960” 高度=“600” > {this.nodeTreeGroup=r；}}/> ); } } 演示：

最大的问题是错误使用

ReactDOM.findDOMNode（this.refs.nodeTree）

。因为您使用了回调函数来设置类的属性

this.refs

将不包含任何内容，因为我们没有使用在ref中使用字符串的遗留api

---

有关react中的

refs

的更多详细信息，请参见。

请有人帮助我