如何在d3plus/javascript中为open.window()onclick事件传递路径? [英] How can I pass a path to open.window() onclick event in d3plus / javascript?

问题描述

我正在尝试通过d3plus.js构建一个小型应用程序.目的是使用网络可视化来显示代表pdf文件的一系列节点.单击该节点后，将出现一个显示pdf的窗口.

I am trying to build a small application via d3plus.js. The aim is to use network visualisation to show a series of nodes representing pdf files. When the node is clicked a window showing the pdf should occur.

我想出了如何使用window.open()函数，并且如果我直接将路径写入window.open()函数(fx"docs/somepdf.pdf")，该方法也可以使用.

I figured out how to use the window.open() function and it works if I write the path directly into the window.open() function (fx "docs/somepdf.pdf").

我的问题是现在将路径字符串从sample_data传递到window.open函数.

My problem is now to pass the path string from the sample_data to the window.open function.

有人可以告诉我我在做什么错吗?

Can anyone pleas tell me what I am doing wrong here?

<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>

推荐答案

问题是您将路径"作为字符串而不是节点的属性来提供.

The problem is that you provide "path" as a string and not as an attribute of the node.

尝试将您的mouse方法更改为:

Try to change your mouse method to:

.mouse({                
  "move": false,
  "click": function(node){window.open(node.path, '_blank', 'fullscreen=yes')}    
})

看看类似的工作示例: http://jsfiddle.net/v1fvhpvx/14/

Take a look at the similar working example: http://jsfiddle.net/v1fvhpvx/14/

这篇关于如何在d3plus/javascript中为open.window()onclick事件传递路径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！