aaronkw / d3-network Goto Github PK

I wrote a small program trying to load a simple gene network, but the web page only shows a horizontal bar in color (see attached screenshot).
d3-network-test

Here is the javascript code that I wrote:

<script type="text/javascript">
     genes_in = [
         { id: 0, name: "zero" },
         { id: 1, name: "one" },
         { id: 2, name: "two" },
         { id: 3, name: "three" }
     ];

     edges_in = [
         { source: 0, target: 1, weight: 0.1 },
         { source: 0, target: 2, weight: 0.2 },
         { source: 0, target: 3, weight: 0.3 },
         { source: 1, target: 2, weight: 0.4 },
         { source: 2, target: 3, weight: 0.5 }
     ];

     var network = d3.network().genes(genes_in).edges(edges_in);
     d3.select("#chart").append("svg").attr("width", 500).attr("height", 500).call(network);
     network.showLegend().filter(.05, 10).draw();
</script>

The console of Chrome's development tools shows many errors like this:

d3.v2.js:1614 Error: <line> attribute x1: Expected length, "NaN".

which points to lines 171-173 of d3.network.js.
(d3.v2.js is the d3 library that I downloaded from your GIANT web server.)

Can you tell me where I did wrong? Thanks.

I tried to add a new listener for mouseclick event on the gene circle. Here is what added in the example:

function callback() {
  console.log("hello world");
}
network.onGene("mouseclick.custom", callback);

But I can't see the messages from console at all. Then I tried mouseover event on the edge and it worked. What is the proper way to register the mouseclick event on gene circle?

Is it possible to assign a class to the legend text so that users can configure it (like the gene-name class)? I tried to change the text size with this style:

text: {
    font-size: 13;
}

and it doesn't seem to have any effect.

But if I change d3.network.js to assign a class name to legendStart, legendEnd and legendText like this:

.attr("class", "legend-text")

and change CSS into:

text.legend-text: {
    font-size: 13;
}

then it works as expected. I wonder whether this is because text conflicts with other identifiers in bootstrap.

Another thing that bothers me is in my application code, the legendEnd text does not show up for some reason (see my attached image file). Do you have any idea why?

Thanks again.

Is there an easy way to change the starting and ending values of the legend? Right now the values are always in the range of 0~1.0, but our gene network edges have weight of -1.0~1.0.

It will be nice if you can add another utility function such as addLegendTxt(string) to set the legend text underneath the bar.

Thanks.

On lines 52-53 of d3.network.js:

if (typeof edge.source == "number") edge.source = genes[edge.source];
if (typeof edge.target == "number") edge.target = genes[edge.target];

The code seems to be assuming that each input edge's source and target properties are identical to the source and target gene's index in input genes. This may not be the case if genes and edges are retrieved from a back end database. For example, suppose we have the following input data:

genes_in = [ { id: 123, name: "foo" }, { id: 456, name: "bar" } ];
edges_in = [ { source: 123, target: 456, weight: 3.14} ];

The program will crash due to the out-of-range error in the above two lines.

It seems to make more sense if we change lines 52-53 into something like:

function search_gene_by_id(id_in) {
  for (var idx = 0; idx < genes.length; ++idx) {
      if (genes[idx] === id_in) return genes[idx];
  }
  return undefined; // optional line
}
if (typeof edge.source == "number") edge.source = search_gene_by_id(edge.source);
if (typeof edge.target == "number") edge.target = search_gene_by_id(edge.target);

I wonder whether you can add one more parameter in filter() method so that we can call it by either:

network.filter(min_edge_cut, node_cut);

or:

network.filter(min_edge_cut, max_edge_cut, node_cut);

Thanks.

https://github.com/aaronkw/d3-network/blob/master/d3.network.js#L105-L106

These lines do not properly take into account that query_degreen and degreen can and will be 0, particularly for the query genes, and will cause query_degree and degree to become NaN. This in turn causes the sorting/ranking to not work properly under certain circumstances:

[33, 22, 11, NaN, NaN, 66, 55, 44].sort((a,b)=>b-a) // outputs [33, 22, 11, NaN, NaN, 66, 55, 44]

because both 1-NaN and NaN-1, for example, both yield NaN.

In more complex situations, the order can even different between different browsers, most likely due to the under-the-hood differences in the sorting implementations.

These lines:

https://github.com/aaronkw/d3-network/blob/master/d3.network.js#L105-L106

should have something like this underneath:

if (isNaN(genes[i].query_degree)) {
  genes[i].query_degree = Infinity;
}
if (isNaN(genes[i].degree)) {
  genes[i].degree = Infinity;
}

You'll also have to add some checks to this line to keep the same error from happening:
https://github.com/aaronkw/d3-network/blob/master/d3.network.js#L123

You may remember that the edge weight values in the app that I have been working on are in the range of (-1.0, 1.0). In order to use d3.network, I have to manually translate these values into the range of (0, 2.0). The code is not natural and involves lots of weight conversions back and forth. So I would like to extend d3.network so that it can support negative weight officially.

I have checked the code and this feature is not as complicated to implement as I thought. Do you mind if I change the code and file a PR for you to review?

Line 39 of d3.network.js:

var edgeColor = d3.scale.linear().domain([options.start_edge,.15,1])

options (defined at the beginning) doesn't have start_edge property any more. I think this line should be changed into:

var edgeColor = d3.scale.linear().domain([min_edge, .15, max_edge])

eslint on my building box complains that a few lines in d3.network.js have trailing spaces. Do you mind if I remove them and submit a pull request?