Проблема увеличения в dagre-d3 при использовании с vuejs2 с режимом просмотра

Question

Я использую d3-dagre для рендеринга данных. Первоначально я могу представить данные без каких-либо проблем. Когда я пытаюсь обновить то же представление в режиме просмотра, оно обновляет данные, но все равно в консоли выдается ошибка для преобразования атрибута "g". Всякий раз, когда я пытаюсь переписать элементы SVG, я удаляю элемент "g" внутри тега "svg". Я пытаюсь это в 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 вы можете добавить новый график.