vuejs + dagre-d3 tooltip issue

问题:

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

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

回答1:

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.

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