Попытка построения графика с использованием d3.js

Question

Я новичок в d3 и пытаюсь выполнить графический макет.

 var w = 1000; 
     var h = 500; 
     var dataset = { 
      nodes: [{ 
       name: 'Aden' 
      }, { 
       name: 'Bob' 
      }, { 
       name: 'Sue' 
      }], 
      edges: [{ 
       source: 0, 
       target: 1 
      }, { 
       source: 1, 
       target: 2 
      }] 
     }; 
     var svg = d3.select("body") 
      .append("svg") 
      .attr("height", h) 
      .attr("width", w); 

     var force = d3.layout.force() 
      .nodes(dataset.nodes) 
      .links(dataset.edges) 
      .size([w, h]) 
      .linkDistance([50]) 
      .start(); 

     var nodes = svg.selectAll("circle") 
      .data(dataset.nodes) 
      .enter() 
      .append("circle") 
      .attr("r", 10) 
      .style("fill", "red") 
      .call(force.drag); 

     var edges = svg.selectAll("line") 
      .data(dataset.edges) 
      .enter() 
      .append("line") 
      .style("stroke", "#ccc") 
      .style("stroke-width", 1); 

Моя скрипка находится в: http://jsfiddle.net/abhimita/MnX23/

Я не вижу граф, но не мог понять, что я делаю неправильно. Любая помощь будет действительно оценена.

Answer 1

1.you NEET установить сх и су окружности, чтобы расположить круг 2.you необходимо установить x1 y1, x2 у2 от линии до позиции линии

3.если вам нужно активировать, вам необходимо прослушать тик-симуляцию.

  var w = 300; 
      var h = 300; 
      var dataset = { 
       nodes: [{ 
        name: 'Aden' 
       }, { 
        name: 'Bob' 
       }, { 
        name: 'Sue' 
       }], 
       edges: [{ 
        source: 0, 
        target: 1 
       }, { 
        source: 1, 
        target: 2 
       }] 
      }; 
      var svg = d3.select("body") 
       .append("svg") 
       .attr("height", h) 
       .attr("width", w); 

      var force = d3.layout.force() 
       .nodes(dataset.nodes) 
       .links(dataset.edges) 
       .size([w, h]) 
      .on("tick", tick) // listener tick to listen position change 
       .linkDistance([50]) 
       .start(); 

      var nodes = svg.selectAll("circle") 
       .data(dataset.nodes) 
       .enter() 
       .append("circle") 
       .attr("r", 10) 
      // set cx cy of circle to position the circle 
      .attr("cx", function (d) {return d.x; }) 
      .attr("cy", function (d) { return d.y; }) 
       .style("fill", "red") 
       .call(force.drag); 

      var edges = svg.selectAll("line") 
       .data(dataset.edges) 
       .enter() 
       .append("line") 
      // set x1, y1, x2, y2 to position the line 
      .attr("x1", function (d) { 
       return d.source.x; 
      }) 
      .attr("y1", function (d) { 
       return d.source.y; 
      }) 
      .attr("x2", function (d) { 
       return d.target.x; 
      }) 
      .attr("y2", function (d){ 
       return d.target.y; 
      }) 
       .style("stroke", "#ccc") 
       .style("stroke-width", 1); 

// make it actively 
function tick(e) { 
    edges.attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

    nodes.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
} 

демо-версия: http://jsfiddle.net/MnX23/3/

Answer 2

В кругу вы должны упомянуть cx и cy атрибуты и линии x1,y1,x2,y2 атрибуты

• Атрибут x1 определяет начало линии на оси х
• Атрибут y1 определяет начало из линия по оси у
• атрибут х2 определяет конец линии на оси х
• атрибут у2 определяет конец линии на оси у

Попробуйте этот код:

DEMO

var w = 1000; 
     var h = 500; 
     var dataset = { 
      nodes: [{ 
       name: 'Aden' 
      }, { 
       name: 'Bob' 
      }, { 
       name: 'Sue' 
      }], 
      edges: [{ 
       source: 0, 
       target: 1 
      }, { 
       source: 1, 
       target: 2 
      }] 
     }; 
     var svg = d3.select("body") 
      .append("svg") 
      .attr("height", h) 
      .attr("width", w); 

     var force = d3.layout.force() 
      .nodes(dataset.nodes) 
      .links(dataset.edges) 
      .size([w, h]) 
      .linkDistance([50]) 
      .start(); 

     var nodes = svg.selectAll("circle") 
      .data(dataset.nodes) 
      .enter() 
      .append("circle") 
      .attr("r", 10) 
      .style("fill", "red") 

      .call(force.drag); 

     var edges = svg.selectAll("line") 
      .data(dataset.edges) 
      .enter() 
      .append("line") 

      .style("stroke", "#ccc") 
      .style("stroke-width", 1); 

     force.on("tick", function() { 
     edges.attr("x1", function(d) { return d.source.x; }) 
      .attr("y1", function(d) { return d.source.y; }) 
      .attr("x2", function(d) { return d.target.x; }) 
      .attr("y2", function(d) { return d.target.y; }); 

     nodes.attr("cx", function(d) { return d.x; }) 
      .attr("cy", function(d) { return d.y; }); 
      });