使用vuejs2與手錶模式時使用dagre-d3的縮放問題

我正在使用d3-dagre來呈現數據。最初，我可以沒有任何問題地呈現數據。當我嘗試在監視模式下更新相同的視圖時，它正在更新數據，但仍在控制檯中爲「g」屬性轉換引發一些錯誤。每當我嘗試重寫SVG元素時，我都會刪除「svg」標籤中的「g」元素。我正在vuejs2 ui庫中嘗試此操作。使用vuejs2與手錶模式時使用dagre-d3的縮放問題

watch: { 
    workflowDetails: function (changes) { 
    console.log('Update component ==> ' + changes) 
    this.workflowName = changes.label 
    this.workflowDetails = changes 
    this.metricGraph = false 
    this.drawDAGView() 
    } 
}, 
mounted() { 
    this.drawDAGView() 
}, 
methods: { 
getJobid: function (nodeId) { 
    console.log('Function to get graph api' + nodeId) 
    this.metricGraph = true 
}, 
drawDAGView: function (isUpdate) { 
    /* eslint-disable */

d3.selectAll('svg > g').remove()

// Create a new directed graph 
    var g = new dagreD3.graphlib.Graph().setGraph({}) 

    var DagNodes = this.workflowDetails.nodes 
    var fillColor 
    // Add states to the graph, set labels, and style 
    Object.keys(DagNodes).forEach(function(key) { 
     console.log("Nodes - "+ DagNodes[key].name) 
     var value = DagNodes[key] 
     value.label = DagNodes[key].name + " (" + DagNodes[key].exec_time + ")" 
     value.rx = value.ry = 5 
     g.setNode(DagNodes[key].name, value) 
    }) 

    var DagEdges = this.workflowDetails.edges; 
    // Add states to the graph, set labels, and style 
    Object.keys(DagEdges).forEach(function(key) { 
     g.setEdge(DagEdges[key].startEdge, DagEdges[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'>" + name + "</p><p class='description'>" + description + "</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 }) }) 
    var self = this 
    inner.selectAll("g.node") 
    .on("click", function(v) { 
     console.log("Nodes --> "+ v + " -- "+ g.node(v).node_id) 
     // whatever 
     //window.location = "../dag/"+g.node(v).job_id 
     self.nodeId = g.node(v).node_id 
     console.log("Node id -- "+ self.nodeId) 
     self.getJobid(self.nodeId) 
    }) 

    // 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', "100%") 
}

錯誤 - 由於這個錯誤以下新加載的數據不能夠放大

Error: <g> attribute transform: Expected number, "translate(NaN,20)

來源

2017-08-16 krrr25

你有沒有試圖消除SVG？刪除SVG後，您可以添加新的圖。

來源

2017-10-05 16:13:12

使用vuejs2與手錶模式時使用dagre-d3的縮放問題

回答

相關問題