Javascript 单击dagre-d3中的节点
我正在使用degre-d3,在获取单击节点的节点数据时遇到问题。单击时我有一个事件,但d3.select(此)似乎无法获取相关数据(如果可能,我希望获得节点名称、标签和其他对象数据)Javascript 单击dagre-d3中的节点,javascript,d3.js,dagre-d3,Javascript,D3.js,Dagre D3,我正在使用degre-d3,在获取单击节点的节点数据时遇到问题。单击时我有一个事件,但d3.select(此)似乎无法获取相关数据(如果可能,我希望获得节点名称、标签和其他对象数据) app.controller "DashboardElementShowController", ($scope, DashboardElementIndexService) -> init_app = -> # Create a new directed graph g = new
app.controller "DashboardElementShowController", ($scope, DashboardElementIndexService) ->
init_app = ->
# Create a new directed graph
g = new dagreD3.Digraph()
g.addNode "bpitt",
label: "html Brad Pitt <b>test</b>"
g.addNode "hford",
label: "Harrison Ford"
g.addNode "lwilson",
label: "Luke Wilson"
g.addNode "kbacon",
label: "Kevin Bacon"
g.addEdge null, "bpitt", "kbacon",
g.addEdge null, "hford", "lwilson",
g.addEdge null, "lwilson", "kbacon",
renderer = new dagreD3.Renderer().edgeInterpolate("cardinal")
.edgeTension(0.8)
renderer.edgeInterpolate('linear');
renderer.run g, d3.select("svg g")
d3.select("svg g").on("click", (d, i, k) ->
console.log d3.select(this) # doesn't seem to have relevant info I need
)
init_app()
我不确定该如何以及在何处使用此代码覆盖…来自他们Wiki的示例可能会有所帮助
不同之处在于,运行回调以在渲染时立即为所有节点生成titletext,而OP希望在单击时访问单击节点的数据。演示程序目前不工作,因为它通过HTTP而不是HTTS获取D3JS脚本(奇怪的是其他演示工作。我已经通知了作者。您仍然可以使用Ctr-U或F12来研究代码,或者将其复制到
localhost
并编辑以通过HTTP获取D3JS,以查看其实际操作。
constructor:
@renderer.drawNodes @_drawNodes().bind @
_drawNodes: ->
oldDrawNodes = @renderer.drawNodes()
(graph, svg) ->
# catch drawed nodes
svgNodes = oldDrawNodes graph, svg
svgNodes.on 'click', (nodeId) -> console.log 'node clicked', nodeId