vuejs + dagre-d3工具提示问题 [英] vuejs + dagre-d3 tooltip issue
问题描述
我正在尝试将以下图表(dagre-d3)集成到我的vuejs应用程序中.
I am trying to integrate the below graph(dagre-d3) to my vuejs application.
http://www.samsarin.com/project/dagre-d3/latest/demo/hover.html
我已经能够在vuejs组件内部成功生成图形.但是我无法实现图中提供的工具提示功能.他们正在使用一个名为Tipsy的库,当我以纯HTML格式运行图形时,效果很好.但是当我在vue应用程序中使用它时,抛出以下错误.
I have successfully able to generate the graph inside the vuejs component. But i am not able to achieve the tooltip functionality which is provided in the graph. They are using a library called tipsy, when i run the graph in a plain html it works fine. But when i use inside the vue application its throwing the below error.
[Vue warn]: Error in mounted hook: "TypeError: $(...).tipsy is not a function"
found in
---> <DagView> at
如果我评论了下面的部分图形,则没有任何问题,但是没有显示工具提示.
If i commented the below part graph is generating without any issue but tooltip is not showing.
<script>
export default {
name: 'TreeView',
mounted () {
/* eslint-disable */
// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({})
var Tree_JSON =
{
"nodes":
[
{
"label": "start",
"job_id": "11111"
},
{
"label": "End"
}
],
"edges":
[
{
"startEdge": "start",
"endEdge": "end"
}
]
}
var TreeData = Tree_JSON.nodes;
// Add states to the graph, set labels, and style
Object.keys(TreeData).forEach(function(key) {
var value = TreeData[key]
value.label = TreeData[key].label
value.rx = value.ry = 5
g.setNode(TreeData[key].label, value)
})
var TreeEdges = Tree_JSON.edges;
// Add states to the graph, set labels, and style
Object.keys(TreeEdges).forEach(function(key) {
g.setEdge(TreeEdges[key].startEdge, TreeEdges[key].endEdge, { label: ""} )
})
// Create the renderer
var render = new dagreD3.render()
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
inner = svg.append("g")
// Set up zoom support
var zoom = d3.behavior.zoom().on("zoom", function() {
inner.attr("transform", "translate(" + d3.event.translate + ")" +
"scale(" + d3.event.scale + ")")
})
svg.call(zoom)
// Simple function to style the tooltip for the given node.
var styleTooltip = function(name, description) {
return "<p class='name'>" Test label "</p><p class='description'>" Desc "</p>"
}
// Run the renderer. This is what draws the final graph.
render(inner, g)
inner.selectAll("g.node")
.attr("title", function(v) {
return styleTooltip(v, "Execution Time: "+g.node(v).label + " <br /> Description: "+g.node(v).label)
})
//.each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }) })
inner.selectAll("g.node")
.on("click", function(v) {
console.log("Nodes --> "+ v + " -- "+ g.node(v).label)
// whatever
})
// Center the graph
var initialScale = 1.2
zoom
.translate([(svg.attr("width") - g.graph().width * initialScale) / 50, 20])
.scale(initialScale)
.event(svg)
svg.attr('height', g.graph().height * initialScale + 40)
svg.attr('width', g.graph().width * initialScale + 40)
}
}
推荐答案
Tipsy是jQuery的插件. "TypeError: $(...).tipsy is not a function"
表示jQuery对象上没有名为tipsy
的函数.尝试在jQuery之后和脚本之前包含该插件.
Tipsy is a plugin for jQuery. "TypeError: $(...).tipsy is not a function"
means that there is no function called tipsy
on the jQuery object. Try to include the plugin after jQuery and before your script.
如果您使用的是vue-loader和webpack,请在npm install jtipsy --save
上安装tipsy,然后尝试以下操作:
If you're using vue-loader and webpack, install tipsy with npm install jtipsy --save
and try the following:
import $ from 'jquery'
require('jtipsy')
export default {
name: 'TreeView',
mounted () {
// Your code here
}
}
这篇关于vuejs + dagre-d3工具提示问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!