5

我将这个Dagre-D3演示转换为 React 组件。代码如下。

import React from 'react'
import d3 from 'd3'
import dagreD3 from 'dagre-d3'

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

    componentDidMount() {
        // Create the input graph
        var g = new dagreD3.graphlib.Graph()
          .setGraph({})
          .setDefaultEdgeLabel(function() { return {}; });

        // Here we"re setting nodeclass, which is used by our custom drawNodes function
        // below.
        g.setNode(0,  { label: "TOP",       class: "type-TOP" });
        g.setNode(1,  { label: "S",         class: "type-S" });
        g.setNode(2,  { label: "NP",        class: "type-NP" });
        g.setNode(3,  { label: "DT",        class: "type-DT" });
        g.setNode(4,  { label: "This",      class: "type-TK" });
        g.setNode(5,  { label: "VP",        class: "type-VP" });
        g.setNode(6,  { label: "VBZ",       class: "type-VBZ" });
        g.setNode(7,  { label: "is",        class: "type-TK" });
        g.setNode(8,  { label: "NP",        class: "type-NP" });
        g.setNode(9,  { label: "DT",        class: "type-DT" });
        g.setNode(10, { label: "an",        class: "type-TK" });
        g.setNode(11, { label: "NN",        class: "type-NN" });
        g.setNode(12, { label: "example",   class: "type-TK" });
        g.setNode(13, { label: ".",         class: "type-." });
        g.setNode(14, { label: "sentence",  class: "type-TK" });

        g.nodes().forEach(function(v) {
            var node = g.node(v);
            // Round the corners of the nodes
            node.rx = node.ry = 5;
        });

        // Set up edges, no special attributes.
        g.setEdge(3, 4);
        g.setEdge(2, 3);
        g.setEdge(1, 2);
        g.setEdge(6, 7);
        g.setEdge(5, 6);
        g.setEdge(9, 10);
        g.setEdge(8, 9);
        g.setEdge(11,12);
        g.setEdge(8, 11);
        g.setEdge(5, 8);
        g.setEdge(1, 5);
        g.setEdge(13,14);
        g.setEdge(1, 13);
        g.setEdge(0, 1)

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

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

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

        // Center the graph
        var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
        svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
        svg.attr("height", g.graph().height + 40);
    }

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

问题是节点的渲染未对齐并且它们的大小也是如此。

这就是它的样子。它应该如何在这里。

更新：

这是第一个节点的样子：

在此处输入图像描述

现在怎么办：

<g class="node type-TOP" transform="translate(100,0)" style="opacity: 1;"><rect rx="5" ry="5" x="-10" y="-10" width="20" height="20"></rect><g class="label" transform="translate(0,0)"><g transform="translate(0,0)"><text><tspan xml:space="preserve" dy="1em" x="1">TOP</tspan></text></g></g></g>

应该是什么：

<g class="node type-TOP" transform="translate(211.25,18)" style="opacity: 1;"><rect rx="5" ry="5" x="-24.5" y="-18" width="49" height="36"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-14.5,-8)"><text><tspan xml:space="preserve" dy="1em" x="1">TOP</tspan></text></g></g></g>

宽度和高度计算不正确。宽度应该是 49，但它只有 20。

4

2 回答 2

1

在您使用 findDOMNode 捕获 svg 之后，尝试在 componentDidMount 中设置高度和宽度。

或者尝试以这种方式放置高度和宽度。

style={{height:'900', width:'300'}}

让我知道它是否有效

于 2015-08-30T05:26:19.707 回答
0

我已经找到了解决方法。我遇到了与您完全相同的问题，通过纯粹的反复试验，我发现如果您将图表附加到页面的正文，它可以正常工作。文本和节点对齐，节点大小会根据文本相应更改。这并不理想，但是一种解决方法..

（我不知道反应语法，所以请耐心等待）

而不是像这样预先创建一个 svg 节点（不要这样做）：

var svg = d3.select(React.findDOMNode(this.refs.nodeTree));

即时构建一个并将其附加到整个 HTML 文档的正文元素（执行此操作）：

var svg = d3.select(React.findDOMNode('body'))
            .append('svg')
            .attr('width', 500)
            .attr('height', 500);

我不确定为什么会这样，这可能是您在弗朗索瓦·理查德（François Richard）回答的评论中解释的原因。

于 2018-04-06T00:33:01.017 回答