Показать метки на networkx + node3. js визуализация сети - PullRequest
Новая
       66

Показать метки на networkx + node3. js визуализация сети

0 голосов
/ 12 июля 2020

Я пытаюсь использовать код jrladd (репозиторий GitHub: https://github.com/jrladd/marvel_network) с моими сетевыми данными, чтобы создать визуализацию сети: -Интерактивный -Имеет ползунок для выбора, чтобы отображать только края с вес выше x -Имеет возможность поиска узла, который сделает все остальные узлы невидимыми для se c. -Показаны метки узлов

Сеть Jrladds имеет все эти функции, за исключением отображения меток узлов

Вы можете увидеть, как эта сеть выглядит в: https://bl.ocks.org/jrladd/c76799aa63efd7176bd9006f403e854d

Это код javascript / HTML: 

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}


</style>
<body>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

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

// Call zoom for svg container.
svg.call(d3.zoom().on('zoom', zoomed));

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink())//Or to use names rather than indices: .id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody().strength([-120]).distanceMax([500]))
    .force("center", d3.forceCenter(width / 2, height / 2));

var container = svg.append('g');

// Create form for search (see function below).
var search = d3.select("body").append('form').attr('onsubmit', 'return false;');

var box = search.append('input')
    .attr('type', 'text')
    .attr('id', 'searchTerm')
    .attr('placeholder', 'Type to search...');

var button = search.append('input')
    .attr('type', 'button')
    .attr('value', 'Search')
    .on('click', function () { searchNodes(); });

// Toggle for ego networks on click (below).
var toggle = 0;


d3.json("marvel.json", function(error, graph) {
  if (error) throw error;

  // Make object of all neighboring nodes.
  var linkedByIndex = {};
  graph.links.forEach(function(d) {
      linkedByIndex[d.source + ',' + d.target] = 1;
      linkedByIndex[d.target + ',' + d.source] = 1;
  });

  // A function to test if two nodes are neighboring.
  function neighboring(a, b) {
      return linkedByIndex[a.index + ',' + b.index];
  }

  // Linear scale for degree centrality.
  var degreeSize = d3.scaleLinear()
    .domain([d3.min(graph.nodes, function(d) {return d.degree; }),d3.max(graph.nodes, function(d) {return d.degree; })])
    .range([8,25]);

  // Collision detection based on degree centrality.
  simulation.force("collide", d3.forceCollide().radius( function (d) { return degreeSize(d.degree); }));

  var link = container.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links, function(d) { return d.source + ", " + d.target;})
    .enter().append("line")
      .attr('class', 'link');

  var node = container.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    // Calculate degree centrality within JavaScript.
    //.attr("r", function(d, i) { count = 0; graph.links.forEach(function(l) { if (l.source == i || l.target == i) { count += 1;}; }); return size(count);})
    // Use degree centrality from NetworkX in json.
    .attr('r', function(d, i) { return degreeSize(d.degree); })
    // Color by group, a result of modularity calculation in NetworkX.
      .attr("fill", function(d) { return color(d.group); })
      .attr('class', 'node')
      // On click, toggle ego networks for the selected node.
      .on('click', function(d, i) {
          if (toggle == 0) {
              // Ternary operator restyles links and nodes if they are adjacent.
              d3.selectAll('.link').style('stroke-opacity', function (l) {
                  return l.target == d || l.source == d ? 1 : 0.1;
              });
              d3.selectAll('.node').style('opacity', function (n) {
                  return neighboring(d, n) ? 1 : 0.1;
              });
              d3.select(this).style('opacity', 1);
              toggle = 1;
          }
          else {
              // Restore nodes and links to normal opacity.
              d3.selectAll('.link').style('stroke-opacity', '0.6');
              d3.selectAll('.node').style('opacity', '1');
              toggle = 0;
          }
      })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  node.append("title")
      .text(function(d) { return d.name; });

  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(graph.links);

  function ticked() {
    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("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }

    // A slider (using only d3 and HTML5) that removes nodes below the input threshold.
    var slider = d3.select('body').append('p').text('Edge Weight Threshold: ');

    slider.append('label')
        .attr('for', 'threshold')
        .text('1');
    slider.append('input')
        .attr('type', 'range')
        .attr('min', d3.min(graph.links, function(d) {return d.weight; }))
        .attr('max', d3.max(graph.links, function(d) {return d.weight; }) / 2)
        .attr('value', d3.min(graph.links, function(d) {return d.weight; }))
        .attr('id', 'threshold')
        .style('width', '50%')
        .style('display', 'block')
        .on('input', function () { 
            var threshold = this.value;

            d3.select('label').text(threshold);

            // Find the links that are at or above the threshold.
            var newData = [];
            graph.links.forEach( function (d) {
                if (d.weight >= threshold) {newData.push(d); };
            });

            // Data join with only those new links.
            link = link.data(newData, function(d) {return d.source + ', ' + d.target;});
            link.exit().remove();
            var linkEnter = link.enter().append('line').attr('class', 'link');
            link = linkEnter.merge(link);

            node = node.data(graph.nodes);

            // Restart simulation with new link data.
            simulation
                .nodes(graph.nodes).on('tick', ticked)
                .force("link").links(newData);

            simulation.alphaTarget(0.1).restart();

        });

    // A dropdown menu with three different centrality measures, calculated in NetworkX.
    // Accounts for node collision.
    var dropdown = d3.select('body').append('div')
        .append('select')
        .on('change', function() { 
            var centrality = this.value;
            var centralitySize = d3.scaleLinear()
                .domain([d3.min(graph.nodes, function(d) { return d[centrality]; }), d3.max(graph.nodes, function(d) { return d[centrality]; })])
                .range([8,25]);
            node.attr('r', function(d) { return centralitySize(d[centrality]); } );  
            // Recalculate collision detection based on selected centrality.
            simulation.force("collide", d3.forceCollide().radius( function (d) { return centralitySize(d[centrality]); }));
            simulation.alphaTarget(0.1).restart();
        });

    dropdown.selectAll('option')
        .data(['Degree Centrality', 'Betweenness Centrality', 'Eigenvector Centrality'])
        .enter().append('option')
        .attr('value', function(d) { return d.split(' ')[0].toLowerCase(); })
        .text(function(d) { return d; });

});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

// Zooming function translates the size of the svg container.
function zoomed() {
      container.attr("transform", "translate(" + d3.event.transform.x + ", " + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")");
}

// Search for nodes by making all unmatched nodes temporarily transparent.
function searchNodes() {
    var term = document.getElementById('searchTerm').value;
    var selected = container.selectAll('.node').filter(function (d, i) {
        return d.name.toLowerCase().search(term.toLowerCase()) == -1;
    });
    selected.style('opacity', '0');
    var link = container.selectAll('.link');
    link.style('stroke-opacity', '0');
    d3.selectAll('.node').transition()
        .duration(5000)
        .style('opacity', '1');
    d3.selectAll('.link').transition().duration(5000).style('stroke-opacity', '0.6');
}

</script>
</body>

Чтобы показать метки узлов, я попытался добавить следующий код (на основе этого примера https://gist.github.com/heybignick/3faf257bbbbc7743bb72310d03b86ee8) после var node 

var lables = node.append("text")
      .text(function(d) {
        return d.id;
      })
      .attr('x', 6)
      .attr('y', 3);

Но сеть вообще не меняется.

Есть ли способ сделать визуализацию сети на основе сети networkx, которая имеет все вышеупомянутые функции?

Любая помощь будет принята с благодарностью.

Спасибо, Эндрю

...