d3js力導向圖繪制節點，但沒有鏈接

Question

我有力導向圖。 它顯示沒有問題的節點，並在控制台上寫入鏈接-源和目標。 但是不將其連接到節點。 我可以看到沒有協調員的字段，看圖片

整個代碼在Kibana中，更加復雜，但這是核心：

const link = svg.selectAll('link')
            .data(links)
            .enter()
            .append('svg:line')
            .attr('class', 'link')
            .style("stroke-width", function (d) {return Math.sqrt(d.value);})
            .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;});



            force.on("tick", tick);

      function tick() {
        link.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; });
        node.attr("transform", function(d) {
                            return "translate(" + d.x + "," + d.y + ")"; });
              };

        var node = svg.selectAll('node')
            .data(nodes)
            .enter()
            .append('circle')
            .attr('class', 'node')
            .style("opacity", .9)
            .attr("r", function(d) { return 10; })
            .attr("id", function(d) { return d.id; })
            .attr("cy", function(d){return d.y;})
            .attr("cx", function(d){return d.x;})
            .style("fill",  function(d) { return c20(d.value);})
            .style("stroke-width", 20);

 const svg = div.append('svg')
          .attr('width', width)
          .attr('height', height)
          .append('g')
          .attr('transform', 'translate('+ width / 2 + ',' + height / 3 + ')');


        var force = d3.layout.force()
        .nodes(nodes)
        .links(links)
        .charge(-150)
        .linkDistance(90)
        .start();

我的數據結構：

 links =   
  [{"source": 0, "target": 1, "value":  30},
  {"source": 0, "target": 2, "value":  5},
  {"source": 1, "target": 3, "value":  1},
  {"source": 2, "target": 0, "value":  20}]


 nodes =          
 [{"ip": "92.15.122.1", "value": 5, id:  0},
  {"ip": "12.154.154.22", "value": 20, id:  1},
  {"ip": "255.12.11.1", "value": 30, id:  2},
  {"ip": "54.55.6.55", "value": 1, id:  3}]

我認為問題是在鏈接中將“ id”從“節點”連接到“源”和“目標”。 任何想法如何？

Answer 1

您需要在link變量上設置筆觸顏色

var link = svg.selectAll('link')
  .data(links)
  .enter()
  .append('line')
  .attr('class', 'link')
  .style("stroke", 'black')

請參閱下面的完整代碼段。 我已經清理了它，使其可以在Stack片段中運行。

 var width = 320, height = 240; links = [{ "source": 0, "target": 1, "value": 30 }, { "source": 0, "target": 2, "value": 5 }, { "source": 1, "target": 3, "value": 1 }, { "source": 2, "target": 0, "value": 20 } ] nodes = [{ "ip": "92.15.122.1", "value": 5, id: 0 }, { "ip": "12.154.154.22", "value": 20, id: 1 }, { "ip": "255.12.11.1", "value": 30, id: 2 }, { "ip": "54.55.6.55", "value": 1, id: 3 } ] var svg = d3.select('body').append('svg') .attr('width', width) .attr('height', height) .attr('transform', 'translate(' + width / 2 + ',' + height / 3 + ')'); var force = d3.layout.force() .size([width, height]) .nodes(nodes) .links(links); function tick() { node.attr('r', width / 25) .attr('cx', function(d) { return dx; }) .attr('cy', function(d) { return dy; }); link.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; }); } force.on("tick", tick); var link = svg.selectAll('link') .data(links) .enter() .append('line') .attr('class', 'link') .style("stroke", 'black') .style("stroke-width", function(d) { return Math.sqrt(d.value); }).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;}); var node = svg.selectAll('node') .data(nodes) .enter() .append('circle') .attr('class', 'node') .style("opacity", .9) .attr("r", function(d) { return 10; }) .attr("id", function(d) { return d.id; }) .attr("cy", function(d) { return dy; }) .attr("cx", function(d) { return dx; }) .style("stroke-width", 20); force .nodes(nodes) .links(links) .charge(-150) .linkDistance(90) .start(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>