vuejs + dagre-d3 проблема всплывающей подсказки

Question

Я пытаюсь интегрировать приведенный ниже график (dagre-d3) в мое приложение vuejs.

http://www.samsarin.com/project/dagre-d3/latest/demo/hover.html

Я успешно смог создать график внутри компонента vuejs. Но я не могу достичь функциональности всплывающей подсказки, представленной на графике. Они используют библиотеку под названием tipsy, когда я запускаю график в виде обычного HTML, он работает нормально. Но когда я использую внутри приложения vue, выдает ошибку ниже.

[Vue warn]: Error in mounted hook: "TypeError: $(...).tipsy is not a function"

found in

---> <DagView> at

Если я прокомментировал ниже график части генерируется без каких-либо проблем, но всплывающая подсказка не отображается.

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

Answer 1

Tipsy - это плагин для jQuery. "TypeError: $(...).tipsy is not a function" означает, что нет функции с именем tipsy на объекте jQuery. Попробуйте включить плагин после jQuery и перед вашим скриптом.

Если вы используете vue-loader и веб-пакет, установите npm install jtipsy --save и попробуйте следующее:

import $ from 'jquery'
require('jtipsy')

export default {
  name: 'TreeView',
  mounted () {
    // Your code here
  }
}