如何将路径传递给 d3plus / javascript 中的 open.window() onclick 事件?
How can I pass a path to open.window() onclick event in d3plus / javascript?
我正在尝试通过 d3plus.js 构建一个小型应用程序。目的是使用网络可视化来显示代表 pdf 文件的一系列节点。单击该节点时,应该出现显示 pdf 的 window。
我想出了如何使用 window.open() 函数,如果我将路径直接写入 window.open() 函数 (fx "docs/somepdf.pdf"),它就会起作用。
我现在的问题是将路径字符串从 sample_data 传递到 window.open 函数。
谁能告诉我我做错了什么?
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
// create list of node positions
var sample_data = [
{"name": "alpha", "size": 10, "path": "docs/Tan - 1999 - Text mining The state of the art and the challeng.pdf"},
{"name": "beta", "size": 12, "path": ""},
{"name": "gamma", "size": 30, "path": ""},
{"name": "delta", "size": 26, "path": ""},
{"name": "epsilon", "size": 12, "path": ""},
{"name": "zeta", "size": 26, "path": ""},
{"name": "theta", "size": 11, "path": ""},
{"name": "eta", "size": 24, "path": ""}
]
var connections = [
{"source": "alpha", "target": "beta"},
{"source": "alpha", "target": "gamma"},
{"source": "beta", "target": "delta"},
{"source": "beta", "target": "epsilon"},
{"source": "zeta", "target": "gamma"},
{"source": "theta", "target": "gamma"},
{"source": "eta", "target": "gamma"}
]
// instantiate d3plus
var visualization = d3plus.viz()
.container("#viz")
.type("network")
.edges(connections)
.size("size")
.id("name")
.tooltip(["name", "size"]).mouse({
"move": false, // key will also take custom function
"click": function(){window.open("path", '_blank', 'fullscreen=yes')}
})
.draw()
</script>
问题是您提供 "path" 作为字符串而不是节点的属性。
尝试将您的 mouse
方法更改为:
.mouse({
"move": false,
"click": function(node){window.open(node.path, '_blank', 'fullscreen=yes')}
})
看看类似的工作示例:
http://jsfiddle.net/v1fvhpvx/14/
我正在尝试通过 d3plus.js 构建一个小型应用程序。目的是使用网络可视化来显示代表 pdf 文件的一系列节点。单击该节点时,应该出现显示 pdf 的 window。
我想出了如何使用 window.open() 函数,如果我将路径直接写入 window.open() 函数 (fx "docs/somepdf.pdf"),它就会起作用。
我现在的问题是将路径字符串从 sample_data 传递到 window.open 函数。
谁能告诉我我做错了什么?
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
// create list of node positions
var sample_data = [
{"name": "alpha", "size": 10, "path": "docs/Tan - 1999 - Text mining The state of the art and the challeng.pdf"},
{"name": "beta", "size": 12, "path": ""},
{"name": "gamma", "size": 30, "path": ""},
{"name": "delta", "size": 26, "path": ""},
{"name": "epsilon", "size": 12, "path": ""},
{"name": "zeta", "size": 26, "path": ""},
{"name": "theta", "size": 11, "path": ""},
{"name": "eta", "size": 24, "path": ""}
]
var connections = [
{"source": "alpha", "target": "beta"},
{"source": "alpha", "target": "gamma"},
{"source": "beta", "target": "delta"},
{"source": "beta", "target": "epsilon"},
{"source": "zeta", "target": "gamma"},
{"source": "theta", "target": "gamma"},
{"source": "eta", "target": "gamma"}
]
// instantiate d3plus
var visualization = d3plus.viz()
.container("#viz")
.type("network")
.edges(connections)
.size("size")
.id("name")
.tooltip(["name", "size"]).mouse({
"move": false, // key will also take custom function
"click": function(){window.open("path", '_blank', 'fullscreen=yes')}
})
.draw()
</script>
问题是您提供 "path" 作为字符串而不是节点的属性。
尝试将您的 mouse
方法更改为:
.mouse({
"move": false,
"click": function(node){window.open(node.path, '_blank', 'fullscreen=yes')}
})
看看类似的工作示例: http://jsfiddle.net/v1fvhpvx/14/