个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我在 Viz.js 中有以下 DOT 代码:
digraph G {
node [fontname = "font-awesome"];
17 [id=17, shape="hexagon", label=<<TABLE BORDER="0">
<TR><TD>undefined</TD></TR>
<TR><TD>[47-56]</TD></TR>
<TR><TD id = "abc"><FONT COLOR="#000000"></FONT></TD></TR>
</TABLE>>, style="filled"];
}
我给最后一个TD分配了一个ID(id="abc")，但是Viz.js没有插入这个id创建的原始输出:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.40.1 (20161225.0304)
-->
<!-- Title: G Pages: 1 -->
<svg width="137pt" height="132pt"
viewBox="0.00 0.00 137.01 132.11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 128.1075)">
<title>G</title>
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-128.1075 133.0065,-128.1075 133.0065,4 -4,4"/>
<!-- 17 -->
<g id="17" class="node">
<title>17</title>
<polygon fill="#d3d3d3" stroke="#000000" points="129.0097,-62.0537 96.7565,-124.1613 32.25,-124.1613 -.0032,-62.0537 32.25,.0538 96.7565,.0538 129.0097,-62.0537"/>
<text text-anchor="start" x="37.013" y="-79.4537" font-family="font-awesome" font-size="14.00" fill="#000000">undefined</text>
<text text-anchor="start" x="44.0123" y="-57.4537" font-family="font-awesome" font-size="14.00" fill="#000000">[47-56]</text>
<text text-anchor="start" x="59.1729" y="-35.4537" font-family="font-awesome" font-size="14.00" fill="#000000"></text>
</g>
</g>
</svg>
将 ID 分配给节点在 Viz.js 中确实有效，但在我的节点中，我在 TD 中找到了文本和图标。我想在我的 JQuery 代码中为这个 TD 分配一个委托(delegate)，所以当用户点击 TD 时，我的 javascript 代码中的一个特定函数被调用。但是现在我无法为 TD 分配一个 ID 或类以便稍后调用它。我的 HTML 代码中需要这样的内容:
<text id="Test1" class="ClickIcon" text-anchor="start" x="59.1729" y="-35.4537" font-family="font-awesome" font-size="14.00" fill="#000000"></text>
这样我就可以在我的 javascript 代码中为它分配一个委托(delegate)，如下所示:
graphContainer.delegate('text.ClickIcon', 'click', function(
event) {
mainWindow.webContents.send('alert', 'Event done');
});
我该怎么做？
最佳答案
不幸的是，Graphviz 中存在一个错误，导致 TD 的 ID 属性在 SVG 输出中被忽略。幸运的是，有一个解决方法。如果还添加了虚拟 HREF 属性，则会保留 ID。有关更详细的说明，请参阅 this answer .
下面是你修改后的例子:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.0/viz.js"></script>
<script src="https://unpkg.com/d3-graphviz@0.1.2/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
var dotSrc = `
digraph G {
node [fontname = "font-awesome"];
17 [id=17, shape="hexagon", label=<<TABLE BORDER="0">
<TR><TD>undefined</TD></TR>
<TR><TD>[47-56]</TD></TR>
<TR><TD id = "abc" HREF=" "><FONT COLOR="#000000"></FONT></TD></TR>
</TABLE>>, style="filled"];
}
`;
var graphviz = d3.select("#graph").graphviz();
var dotSrcLines;
function render(dotSrc) {
// console.log('DOT source =', dotSrc);
dotSrcLines = dotSrc.split('\n');
transition1 = d3.transition()
.delay(100)
.duration(1000);
graphviz
.transition(transition1)
.renderDot(dotSrc);
transition1
.transition()
.duration(0)
.on("end", function () {
nodes = d3.selectAll('.node,.edge');
nodes
.selectAll("g")
.on("click", fieldClickHandler)
.selectAll("a")
// Remove the workaround attributes to avoid consuming the click events
.attr("href", null)
.attr("title", null);
});
}
function fieldClickHandler () {
alert("Event done");
}
render(dotSrc);
</script>关于javascript - 将 ID 分配给 Viz.js 的 TD 元素以显示在 svg 元素中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48045987/
24
4
0
我正在用一个 TD 和一个 colspan 属性替换多个 TD。 然而，这呈现完全不同。 我不明白为什么 不同于 我的问题是前 2 个 TD 的宽度之和与 colspanned TD 的宽度不同。
我想这是个愚蠢的问题，但我是 json 的新手，所以任何答案都会有所帮助。 我有 json 文件: `{"aaData": [ [1, "70.1700", "2008-12-29 11:23:00"
我有一个类似 html 的网页格式如下: .... . . . alo foo bla bla 现在，我只知道值 bla bla , 根据该值我们可以跟踪或找到 3rd
我有以下 html 代码: Add New Item test test test test test test test te
Name1 Position1 Operation1 Name2 Position2
如果其中的数据与同一行上第三列 td 内的数据匹配，我需要做的是向第一列 td 添加一个类。 http://jsfiddle.net/rUssu/ html 表格 firstsecondthi
有什么方法可以清除或隐藏第一个 td 的内容，从双列表中的第二个 td，而无需对实际 td 的任何编辑权限？ 所以我想隐藏下表中的数字 1. Content
当第一个高度大于第二个 , 包含第二个文本 与中心对齐。我想要第二个 的文本或元素当第一个 对齐到左上角的高度大于秒。 我如何使用 css 来做到这一点？ ？ HTML5, CSS3 an
我这里遇到了一些麻烦。我正在开发一个按钮，一旦选择该按钮将运行 JavaScript 函数 - ShowColumn() - 这将使表格列出现。表格列首先将被隐藏 - “display:none;”
我需要将第一个 td 设为 100% 宽(包括图像)并将其他 td 放在第一个 td 下方。如何在不更改 HTML 的情况下执行此操作？ 这是我的: #katalogas { float:left;
用于创建规则列表的Java类 public class CompArray { public ArrayList a1= new ArrayList(); public CompArray (){
我想在悬停在特定 td 上时更改特定 td 之前所有 td 的背景颜色。 因此，当我将鼠标悬停在该图标上时，该特定行中它之前的所有图标和文本都会更改它们的背景。 任何人都可以建议如何实现它。 这是我的
我今天花了一些时间查看使用 JQuery 遍历表及其行的示例，经过大量试验后我能够做到这一点。但是我在尝试从 td 元素获取值时遇到问题，因此我可以更改为另一个 td 元素的颜色。我有一个绑定(bin
这个问题在这里已经有了答案: Is there a "previous sibling" selector? (32 个答案) 关闭 7 年前。 我正在构建一个与此类似的表: td
当我想设置 td 的宽度时，我将 td 设置为如下宽度: ... 我已经看到通过添加一个空的 div 来设置 td 宽度: some text .h-间隔符{ 高度:0； 宽度:0； 溢
我有以下 HTML 表格: Products Pack Of Quantity Volume Unit Reb
我需要提升文本，但如果我将类应用于 IE、Opera 和 Chrome 中的 TD 或 TR，则所有单元格都会提升(背景和边框以及单元格中的文本)。请看例子: Untitled D
我试图在所有 之间放置边距除了 的 margin-top在第一行， 的底部边距在最后一行。那可能吗？谢谢。 table { border: 1px solid black; width: 98%;
我需要发布我的 td 标签的这些值，因为这是一个使用 jquery 的可编辑表。我不确定这里的问题是脚本还是 td 标签？目前我的 var_dump($_POST) 没有返回任何值。 参见下面的代码，
我想检查当前网格单元格是否是行中最后一个可见单元格。 //accurately confirms if cell is the last cell in the row, assuming there
我是一名优秀的程序员,十分优秀！