Question

我正在使用d3-dagre来渲染数据。最初我可以毫无问题地渲染数据。当我尝试在监视模式下更新相同的视图时，它正在更新数据，但仍然会在控制台中抛出一些错误，因为＆＃34; g＆＃34;属性转换。每当我尝试重写SVG元素时，我都会删除＆＃34; g＆＃34; ＆＃34; svg＆＃34;内的元素标签。我在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后，您可以添加新图表。

与监视模式的vuejs2一起使用时，dagre-d3中的缩放问题

1 个答案: