文章/答案/技术大牛

发布

社区首页 >问答首页 >d3- graphviz :如果我使用相同的图形渲染器多次绘制稍微不同的图形，则呈现错误。

问d3- graphviz :如果我使用相同的图形渲染器多次绘制稍微不同的图形，则呈现错误。
EN

Stack Overflow用户

提问于 2018-05-01 14:01:52

回答 1查看 1.1K关注 0票数 0

我用d3-图来绘制交互式图形。我发现，在开始时使用相同的图形渲染器重新绘制新的/更新的图形会导致错误的布局。例如，如果我执行以下步骤，就会出错：

创建index.html，包括我们需要使用的d3、d3-graphviz和viz。
使用带有特定回调的renderDot()函数。
再次调用renderDot()绘制另一个带有多行粗体字体标签的
使用renderDot()再次呈现，以生成步骤2中的相同图

我应该再一次走到最后：

然而，最后一步(步骤4)会导致错误的布局图。节点和边缘不会放置在正确的位置：

还请注意，在步骤3之后，如果我单击svg，它会向上移动(一个方向)，这也很奇怪。在我们点击它之后，它看起来如下：

以下是源代码：

index.html:

<!-- language: lang-html -->

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src=https://d3js.org/d3.v5.min.js></script>
<script src=https://unpkg.com/viz.js@1.8.0/viz.js></script>
<script src=https://unpkg.com/d3-graphviz@1.5.0/build/d3-graphviz.min.js></script>

<!-- Main Graph -->
<div id="graph" style="text-align: center;" height=3200px width=3200px></div>

</body>

render.js:

<!-- language: typescript -->

// please run below code step by step

// create renderer
x = d3.select('#graph').graphviz()

// 1st rendering
x.renderDot(`
digraph {
    node [style="filled"]
    0 [id="0" label="honda::models"]
    1 [id="1" label="hidden"]
    2 [id="2" label="hidden"]
    0 -> 1 [id="0->1" label=""]
    0 -> 2 [id="0->2" label=""]
}
`, function() {
    d3.selectAll('text')._groups[0].forEach(function(e) {
        if (ans=/(.+?\: ).+/.exec(e.innerHTML)) {
            e.innerHTML = ans[0].replace(ans[1],
                "<tspan font-weight=bold>" + ans[1] + "</tspan>");
        }
    })
});

// 2nd rendering (bold and multi-line text label)
x.renderDot(`
digraph {
    node [style="filled"]
    0 [id="0" label="honda::models"]
    1 [id="1" label="name: fit\\linventory id: 007"]
    2 [id="2" label="hidden"]
    0 -> 1 [id="0->1" label=""]
    0 -> 2 [id="0->2" label=""]
}
`, function() {
    d3.selectAll('text')._groups[0].forEach(function(e) {
        if (ans=/(.+?\: ).+/.exec(e.innerHTML)) {
            e.innerHTML = ans[0].replace(ans[1],
                "<tspan font-weight=bold>" + ans[1] + "</tspan>");
        }
    })
});

// 3rd rendering
x.renderDot(`
digraph {
    node [style="filled"]
    0 [id="0" label="honda::models"]
    1 [id="1" label="hidden"]
    2 [id="2" label="hidden"]
    0 -> 1 [id="0->1" label=""]
    0 -> 2 [id="0->2" label=""]
}
`, function() {
    d3.selectAll('text')._groups[0].forEach(function(e) {
        if (ans=/(.+?\: ).+/.exec(e.innerHTML)) {
            e.innerHTML = ans[0].replace(ans[1],
                "<tspan font-weight=bold>" + ans[1] + "</tspan>");
        }
    })
});

您可以通过创建index.html来复制它，然后一步一步地运行javascript中的代码。

注意:我把回调函数留在了那里，如果它在每一行中看到模式"text: xxx“，它会更新字体。这在“隐藏”案中没有什么区别。

谢谢!

graphviz

javascript

d3.js

回答 1

Stack Overflow用户

发布于 2018-05-25 05:29:14

您需要在回调中进行后续的呈现。
为了获得粗体字体而对DOM进行的操作会把事情搞砸。用纯属性设置代替。

我在下面的代码中做了这些更改，并添加了一个转换，这样您就可以清楚地看到正在发生的事情，而无需一步一步地运行代码。

这段代码代表了我认为如果你的代码是正确的话，你应该做的事情。参见我在代码中关于设置粗体字体的注释，如果这是您真正想要的话。

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src=https://d3js.org/d3.v5.min.js></script>
<script src=https://unpkg.com/viz.js@1.8.0/viz.js></script>
<script src=https://unpkg.com/d3-graphviz@1.5.0/build/d3-graphviz.min.js></script>

<!-- Main Graph -->
<div id="graph" style="text-align: center;" height=3200px width=3200px></div>

<script>
  // create renderer
x = d3.select('#graph').graphviz()
  .transition(function () {return d3.transition().duration(2000)})
// replace the font-weight settings below with this if you want a bold font already from the start
//  .on("transitionStart", function() {d3.selectAll('text').attr("font-weight", "bold");});

  // 1st rendering
x.renderDot(`
digraph {
    node [style="filled"]
    0 [id="0" label="honda::models"]
    1 [id="1" label="hidden"]
    2 [id="2" label="hidden"]
    0 -> 1 [id="0->1" label=""]
    0 -> 2 [id="0->2" label=""]
}
`, function() {
    d3.selectAll('text').attr("font-weight", "bold");

    // 2nd rendering (bold and multi-line text label)
    x.renderDot(`
    digraph {
        node [style="filled"]
        0 [id="0" label="honda::models"]
        1 [id="1" label="name: fit\\linventory id: 007"]
        2 [id="2" label="hidden"]
        0 -> 1 [id="0->1" label=""]
        0 -> 2 [id="0->2" label=""]
    }
    `, function() {
        d3.selectAll('text').attr("font-weight", "bold");
        // 3rd rendering
        x.renderDot(`
        digraph {
            node [style="filled"]
            0 [id="0" label="honda::models"]
            1 [id="1" label="hidden"]
            2 [id="2" label="hidden"]
            0 -> 1 [id="0->1" label=""]
            0 -> 2 [id="0->2" label=""]
        }
        `, function() {
            d3.selectAll('text').attr("font-weight", "bold");

        });
    });
});

</script>

</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50117897

复制

相似问题

问d3- graphviz :如果我使用相同的图形渲染器多次绘制稍微不同的图形，则呈现错误。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问d3- graphviz :如果我使用相同的图形渲染器多次绘制稍微不同的图形，则呈现错误。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问d3- graphviz :如果我使用相同的图形渲染器多次绘制稍微不同的图形，则呈现错误。
EN