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"意味着在jQuery对象上没有名为tipsy的函数。尝试在jQuery之后和脚本之前包含插件。

如果您使用的是vue-loader和webpack，请使用npm install jtipsy --save安装tipsy，并尝试以下操作：

​

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

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

​