時計モードでvuejs2と併用するとdagre-d3でズームが発生する

Question

私はd3-dagreを使用してデータを表示しています。最初は問題なくデータをレンダリングできます。時計モードで同じビューを更新しようとすると、データを更新していますが、 "g"属性変換のコンソールには何らかのエラーがスローされます。 SVG要素を書き直そうとするたびに、 "svg"タグ内の "g"要素を削除しています。私はvuejs2 uiライブラリでこれを試しています。

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) 

Answer 1

をズームすることができませんエラー新たにロードされたデータの下これには、あなたは、SVGを削除しようとしたことがありますか？ SVGを削除したら、新しいグラフを追加できます。