Abnormal width when I have two graph D3.js on the same page

Question

I have a problem when there is two graph on same page, the first graph has a normal size but the second which is populated by fixed data is anormaly large. The two graph are superimposed. Strange thing, if I use the code of the second graph, it works on my local website test. This is the code of the second graph :

// http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/
    var links = [
        {"source":"TEST111","target":"TEST222","level":"1","life":"1","test":"1","type":"licensing"},
        {"source":"TEST222","target":"TEST3333","level":"2","life":"2","test":"2","type":"licensing"},
        {"source":"TEST3333","target":"TEST4444","level":"3","life":"3","test":"3","type":"licensing"}
    ];

    var nodes = {};

    // Compute the distinct nodes from the links.

    links.forEach(function(link) {
        link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, level:link.level, life:link.life});
        link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, level:link.level, life:link.life});
    });

    var width = 960,
            height = 500;

    var force = d3.layout.force()
            .nodes(d3.values(nodes))
            .links(links)
            .size([width, height])
            .linkDistance(200)
            .charge(-400)
            .on("tick", tick)
            .start();

    var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

    // Per-type markers, as they don't inherit styles.
    svg.append("defs").selectAll("marker")
            .data(["suit", "licensing", "resolved"])
            .enter().append("marker")
            .attr("id", function(d) { return d; })
            .attr("viewBox", "0 -5 10 10")
            .attr("refX", 15)
            .attr("refY", -1.5)
            .attr("markerWidth", 20)
            .attr("markerHeight", 20)
            .attr("orient", "auto")
            .append("path")
            .attr("d", "M0,-5L10,0L0,5");

    var path = svg.append("g").selectAll("path")
            .data(force.links())
            .enter().append("path")
            .attr("class", function(d) { return "link " + d.type; })
            .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

    var circle = svg.append("g").selectAll("circle")
            .data(force.nodes())
            .enter().append("circle")
            .attr("r", 20)
            .call(force.drag)
            .style("fill","red")
            .on("click", click);
    function click(d){


    }

    var text = svg.append("g").selectAll("text")
            .data(force.nodes())
            .enter().append("text")
            .attr("x", 8)
            .attr("y", ".31em")
            .text(function(d) { return d.name; });

    // Use elliptical arc path segments to doubly-encode directionality.
    function tick() {
        path.attr("d", linkArc);
        circle.attr("transform", transform);
        text.attr("transform", transform)
    }

    function linkArc(d) {
        var dx = d.target.x - d.source.x,
                dy = d.target.y - d.source.y,
                dr = Math.sqrt(dx * dx + dy * dy);
        return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
    }

    function transform(d) {
        return "translate(" + d.x + "," + d.y + ")";
    }

Also, on the Pluker, the two graph are bunk but it's not the problem (It works in local). You can delete the data load if you want (line 34). This is an online Plunker to see the problem : https://plnkr.co/edit/ewoi6wao97tXAKr1QxIm?p=preview Thanks.

Answer 1

Basically your problem was you were filling the path rather than just giving it a stroke.

So when you create the path just add the following :

  .style("fill","none").style("stroke","red")

So now it looks like :

  var path = svg.append("g").selectAll("path")
            .data(force.links())
            .enter().append("path")
            .attr("class", function(d) { return "link " + d.type; })
            .style("fill","none").style("stroke","red")
            .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

Updated plnkr : https://plnkr.co/edit/JgHwC4zyolj0hsg8ib4w?p=preview