D3 Firefox issue showing graph incorrect - not showing any SVG at all

Question

So this is how it shall look like (Chrome browser):

https://i.sstatic.net/i1AY7.png

There everything is fine and really fast.

But accidentially I tested my prototype with the Firefox and I don't know know what is going on there. Here is picture of the same example:

https://i.sstatic.net/fg0Dt.png

markers are not correctly drawed (look at the arrows, there are somehow strange line, in Crhome everything is fine)
the svg's are not loaded (if I take instead png's it also works in Firefox, so this is a svg issue somehow)
and it's really slow (but maybe that is normal because Chrome has a better performance in JS?)

Here is another picture of the HTML code: https://i.sstatic.net/btYwP.png

Showing you the image svg thing. As you can see the code is valid.

So yeah what is going on? Why does Firefox have so many problems? Are there errors in the HTML code? I already validated it and didn't find anything.

Already tried:

to delete the circle, maybe it was in the front in the Firefox ( but as you can see here https://i.sstatic.net/a2ur9.png that was not the case) I delete the first circle. And now the place is empty there. So you can see it's not an z-index issue at all. Must be anything else, because as I said if I take a png there instead it works.
I also tested: image class="svgimage svgimagePerson" href="pics/node_person.svg" x="-20px" y="-20px" width="40px" height="40px" But the same thing. Still now shown the svg in the Firefox.
Ohh and not to forget the both classes are empty. I want to use them later on when everything is working. So currently they are just placeholders but they have no influence on this issue.

What else could I try to do. Loading svg via background-image? But I really would like to know the reason for running in Chrome but not in Firefox.

Any help is welcome especially the SVG loading issue. Thank you.

Graph initializing code

function initializeGraph(){
    zoom.on("zoom", zoomed);
    drag.on("dragstart", dragstart);

    force
        .size([width, height])
        .gravity(.1)
        .charge(-400)
        .friction(0.9)
        .theta(0.9) 
        .linkStrength(0.9)
        .distance(55)
        .alpha(0.1)
        .on("tick", tick);
    force.start();
    svg = d3.select("#main-right")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .call(zoom).on("dblclick.zoom", null);
    svg
        .append("svg:defs").selectAll("marker")
        .data(["end"]) 
        .enter().append("svg:marker")   
        .attr("id", String)
        .attr("viewBox", "0 -5 10 10")
        .attr("refX", 32)
        .attr("refY", -0.05)
        .attr("markerWidth", 6)
        .attr("markerHeight", 6)
        .attr("orient", "auto")
        .append("svg:path")
        .attr("d", "M0,-5L10,0L0,5")
        .attr('fill', '#359AF4');

    container = svg.append("g");

    link = container.append("g")
        .attr("class", "links")
        .selectAll(".link")
        .data(force.links())
        .enter().append("line")
        .attr("class", "link")
        .attr("marker-end", "url(#end)");

    node = container.append("g")
        .attr("class", "nodes")
        .selectAll(".node")
        .data(force.nodes())
        .enter().append("g")
        .attr("class", "node")
        .on("mouseover", mouseover)
        .on("mouseout", mouseout)
        .on("click",        function(d) { click(d); })
        .on("dblclick",     function(d) { dblclick(d); })
        .on('contextmenu',  function(data, index) {
                                                d3.event.preventDefault();
                                                updateGraphByRemoveElement(data, index);
                                        })
        .call(drag);    
    node
        .append("circle")
        .attr("class", "bgcircle")
        .attr("r", 20)
        .attr("cx", 0)
        .attr("cy", 0)
        .style("fill", '#eee')
        .style("stroke", '#fff')
        .style("stroke-width", '0.5px');
    node
        .append("image")
        .attr("class","svgimage svgimagePerson")
        .attr("xlink:href", function(d) {
                                            if (d.class == "Person") {
                                                return "pics/node_person.svg";
                                            } else {
                                                return "pics/node_appln.svg";
                                        }} )
        .attr("x", "-20px")
        .attr("y", "-20px")
        .attr("width", "40px")
        .attr("height", "40px");
    node
        .append("text")
        .attr("class", "nodetext")
        .attr("x", 20)
        .attr("y", 4)
        .text(function(d) { return d.name; });  
    node
        .append("circle")
        .attr("class", "linkcountercircle")
        .attr("r", 7)
        .attr("cx", 0)
        .attr("cy", -16);
    node
        .append("text")
        .attr("class", "linkcountertext")
        .attr("x", -3)
        .attr("y", -13)
        .text(function(d) { return d.linkCount; });
    setzoom();
}

The SVG file that does not work

Robert Longson · Accepted Answer

http://commons.wikimedia.org/wiki/File%3ATux.svg is not an SVG image. It's an html page that has a PNG image that shows what an SVG image would look like if you displayed it.

The SVG image you're looking for is http://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg which can be found by clicking on the wikipedia page above.

Fixing that gives me penguins on the nodes which I assume is what you want. I imagine the other image has the same problem.

Your actual image is large and so you'll just see the top left corner which is blank. Adding a viewBox to the SVG image file is probably what you'll need you'll need to experiment to get the right values for the viewBox.

D3 Firefox issue showing graph incorrect - not showing any SVG at all

Graph initializing code

The SVG file that does not work

Answers (2)

Related Questions