Node SVG not displaying after customization

[arne-fuchs]

I was trying to follow the example codes to customize the node appearance. I have following code:

    var graphics = Viva.Graph.View.webglGraphics();
    graphics.node(function(node) {
        console.log(node.id);
        return Viva.Graph.svg("rect")
            .attr("width", 10)
            .attr("height", 10)
            .attr("fill", "#00a2e8");
    });

    // specify where it should be rendered:
    var renderer = Viva.Graph.View.renderer(graph, {
        container: document.getElementById('graphDiv'),
        layout : layout,
        graphics: graphics,
        renderLinks : true
    });
    renderer.run();

and nodes disappear:

Removing graphics.node(... reveals the nodes again:

Behind Viva.Graph.svg("rect") is a valid object.

[john-tettis]

The issue is that you are mixing WebGL rendering and svg rendering. Notice how when you instantiate graphics you are using .webglGraphics adn when you customize the nodes you are using .svg

These two rendering modes are mutually exclusive in VivaGraph and though I did not follow the rabbit hole to know for sure, it seems that your nodes are being placed onto the svg view that is never rendered. Not 100% sure about what is happening, but i know that if you change var graphics = Viva.Graph.View.webglGraphics(); to var graphics = Viva.Graph.View.svgGraphics();

that your nodes will now appear. However, depending on what else you have going on in your code, this will break certain other things. I know personally I have found that what I want to do would require a mixture of svg and webgl functionality which is just not possible.