Аномальная ширина, когда у меня есть два графика D3.js на той же странице

Question

У меня проблема, когда на одной странице есть два графика, первый график имеет нормальный размер, а второй, который заполнен фиксированными данными, является аномальным. Два графика накладываются друг на друга. Странно, если я использую код второго графика, он работает на моем локальном тестировании сайта. Это код второго графа:

// 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 + ")"; 
    } 

Кроме того, на Pluker, два графа является кушеткой, но это не проблема (Она работает в местном). Вы можете удалить загрузку данных, если хотите (строка 34). Это онлайн-плункер, чтобы увидеть проблему: https://plnkr.co/edit/ewoi6wao97tXAKr1QxIm?p=preview Спасибо.

Answer 1

В основном ваша проблема заключалась в том, что вы заполняли путь, а не просто инсульт.

Итак, когда вы создаете путь только добавить следующее:

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

Так что теперь он выглядит следующим образом:

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 + ")"; }); 

Обновлено plnkr: https://plnkr.co/edit/JgHwC4zyolj0hsg8ib4w?p=preview