Huge lag with 100+ nodes with picture

[bastien dine]

Hi everybody,

I'm developping a network cartography feature for my company, and i plan to use D3 for the network visualization.
After some tests, I've juste encountered a major issue :
  I'm using the force directed graph layout and i've a JSON  file which contains about 110 nodes, and each node have a picture.
  The matter is : when after the graph is drawn, all the interaction with it is slow, in fact my browser runs in slow-motion.

I read that D3 could handle a graph with a large numbers of nodes, what could be the cause of this slowing down ?

Regards,

[Kai Chang]

What browser are you using? How many links does your graph contain?

D3 cannot handle very large graphs, but 110 nodes is relatively small. There is perhaps a double-loop or extra unnecessary computation happening in your code-- it's impossible to say without seeing it running.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[bastien dine]

Thanks for your reply,
My graph has 110 links too; i wonder : can this picture on every node impact the performance ?

I'll check for some useless computation in my code

[bastien dine]

That's pretty weird, i cannot figure it out.
Here is my code :

var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height)
               
               
               
    var force = d3.layout.force()
                .charge(-120)
                .nodes([{}])
                .linkDistance(50)
                .size([1000, 500]);

$.ajax({
            type: "POST",
            url: "server.php",
            data: { "action" : action , "index" : index},
            dataType: "json",
            success: function (jsonObject) {
       
                        force.nodes(jsonObject.nodes)
                    .links(jsonObject.links)
                   
             var link = svg.selectAll(".link")
              .data(jsonObject.links)
            .enter().append("line")
              .attr("class", "link")
              .style("stroke-width",2)
              .style("stroke","black");

          var node = svg.selectAll(".node")
              .data(jsonObject.nodes)
            .enter().append("svg:image")
                    .attr("xlink:href", function(d) {
                                    return d.picture})
              .attr("class", "node")
              .attr("width", pc_width)
              .attr("height", pc_height)
              .call(force.drag);
             
              var hash_lookup = [];
            // make it so we can lookup nodes in O(1):
       
            jsonObject.nodes.forEach(function(d, i) {
              hash_lookup[d.index] = d;
            });
            jsonObject.links.forEach(function(d, i) {
              d.source = hash_lookup[d.source];
              d.target = hash_lookup[d.target];
            });
           
           
           force.start();
           
           force.on("tick", function() {
            link.attr("x1", function(d) { return d.source.x+pc_width/2; })
                .attr("y1", function(d) { return d.source.y+pc_height/2; })
                .attr("x2", function(d) { return d.target.x+pc_width/2; })
                .attr("y2", function(d) { return d.target.y+pc_height/2; });

            node.attr("x", function(d) { return d.x; })
                .attr("y", function(d) { return d.y; });
            });
}

[Chris Viau]

You should use the "use" element instead of the "image" element to reuse a single image. Or try to replace the images by rectangle and you will know if it's the bottleneck. 

}

[bastien dine]

Hi,
Thanks for your reply Chris,
Without the element "image", (with a circle or a rectangle) my graph isn't lagging anymore.
So i've tried to use the "use" element, but i cannot find it in any doc (https://github.com/mbostock/d3/wiki/SVG-Shapes), have you an example of it's utilization ?

Thanks for your help,
Regards,

[bastien dine]

I just tried something like this :

svg.selectAll(".image").append("image")
                    .attr("xlink:href","pc.png").attr("id","MyImg");

....

ar node = svg.selectAll(".node")
              .data(jsonObject.nodes)

            .enter().append("use")
                    .attr("xlink:href", "#MyImg")

              .attr("class", "node")
              .attr("width", pc_width)
              .attr("height", pc_height)
              .call(force.drag);

But I gat no image on my graph ..

Le mercredi 24 avril 2013 10:35:46 UTC+2, bastien dine a écrit :

[bastien dine]

Hi,

After some tests, I finally find how to use "use", yet it doesn't enhance the performance and reduce the lags.. Does anyone have other suggestions ? Feel free to speak ;D

Here is my test code which actually works :

    var svg = d3.select("body").append("svg")
        .attr("width", width)

        .attr("height", height);

    svg.append("svg:image")
        .attr("xlink:href", "pc.jpg")
        .attr("id","PC")

        .attr("width", pc_width)
        .attr("height", pc_height)
       
       

    d3.json("network.json", function(error, graph) {
      force
          .nodes(graph.nodes)
          .links(graph.connections)

         
       
      var link = svg.selectAll(".link")

          .data(graph.connections)

        .enter().append("line")
          .attr("class", "link")
          .style("stroke-width",2)
          .style("stroke","black");

      var node = svg.selectAll(".node")
          .data(graph.nodes)
        .enter().append("use")
              .attr("xlink:href", "#PC")

              .attr("class", "node")

Le mercredi 24 avril 2013 10:35:46 UTC+2, bastien dine a écrit :

[Chris Viau]

Your image to be reuse doesn't seem to be in a "defs" element...

http://www.svgbasics.com/defs.html

[bastien dine]

Hi,

After some tests, it appears that the problem is only with Firefox.
Research lead me to find that Firefox has some issues dealing with SVG, have anybody the same problem ?
Is there a way to fix thoses lags ?

Regards,

[Miguel Pignatelli]

Hi,

On 02/05/13 15:33, bastien dine wrote:
> Hi,
>
> After some tests, it appears that the problem is only with Firefox.
> Research lead me to find that Firefox has some issues dealing with SVG,
> have anybody the same problem ?

Yes, I am having the same problem, even with Firebug switched off. I
haven't had much time to investigate on it yet, though.

I haven't posted a question here yet because I want a clean & minimal
example of the issue (and I haven't found time to make one yet).

But if anyone has faced this problem before I would also like to hear
his/her experience.

Cheers,

M;

> Is there a way to fix thoses lags ?
>
> Regards,
>

[David Kim]

Hi,

I had a similar problem while drawing forced word bubbles (for 300 words). 

Chrome and Safari worked ok, but it was very slow on Firefox.  

David 

On Thu, May 2, 2013 at 9:44 AM, Miguel Pignatelli <eme...@gmail.com> wrote:

Hi,

On 02/05/13 15:33, bastien dine wrote:

Hi,

After some tests, it appears that the problem is only with Firefox.
Research lead me to find that Firefox has some issues dealing with SVG,
have anybody the same problem ?

Yes, I am having the same problem, even with Firebug switched off. I haven't had much time to investigate on it yet, though.

I haven't posted a question here yet because I want a clean & minimal example of the issue (and I haven't found time to make one yet).

But if anyone has faced this problem before I would also like to hear his/her experience.

Cheers,

M;

Is there a way to fix thoses lags ?

Regards,

--
You received this message because you are subscribed to the Google
Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send

an email to d3-js+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.

To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.

[David Kim]

I think so. And, I got another case, a heatmap with about 17,000 words.

Firefox couldn't draw it while Chrome and Safari worked ok (even though 

Safari created a slightly different one (cells looked more fused by blurring the board of each cell)).

The heatmap was part of a topic modeling project, and each row represents the 17000 words, 

each cell's color is based on the score each word got for each topic, 

and the 20 topics are projected onto the X-axis.

So, the heatmap creates 17,000x20 cells (in 800x600 dimension) and one additional thing would be that 

a log scale conversion is done dynamically inside the logic where each cell value (i.e. the score for each topic) is 

mapped to its color. In fact, even without that conversion, the same thing happened.

 

Interestingly, Chrome took 16 seconds to draw, Safari 1 second. Firefox ended up with the stop script window.

On Thu, May 2, 2013 at 12:28 PM, bastien dine <bastie...@gmail.com> wrote:

Well, I just made new tests on other computers, it seems that firefox has problem with SVG ..

2013/5/2 David Kim <davi...@gmail.com>

--

 Bastien DINE

Grenoble INP ESISAR P2013 - Filière IR

Grenoble INP ENSIMAG/UJF - Master M2P SCCI

Tel : 06 62 50 77 83

[Miguel Pignatelli]

This behaviour has been reported several times in the FF issue tracker:

https://bugzilla.mozilla.org/buglist.cgi?quicksearch=slow+svg

Firefox developers seem very responsive to these issues. If you don't
find a solution there, I would file a new one.

I have to go through that process at some point, so I would appreciate
any outcome from your research :-)

Cheers,

M;

On 02/05/13 18:28, bastien dine wrote:
> Well, I just made new tests on other computers, it seems that firefox
> has problem with SVG ..
>
>

> 2013/5/2 David Kim <davi...@gmail.com <mailto:davi...@gmail.com>>

> an email to d3-js+unsubscribe@__googlegroups.com
> <mailto:d3-js%2Bunsu...@googlegroups.com>.
> For more options, visit
> https://groups.google.com/__groups/opt_out
> <https://groups.google.com/groups/opt_out>.

>
>
>
> --
> You received this message because you are subscribed to the
> Google Groups "d3-js" group.
> To unsubscribe from this group and stop receiving emails from

> it, send an email to d3-js+unsubscribe@__googlegroups.com
> <mailto:d3-js%2Bunsu...@googlegroups.com>.
> For more options, visit
> https://groups.google.com/__groups/opt_out
> <https://groups.google.com/groups/opt_out>.
>
>
>
>
>
>
> --
>
> Bastien DINE
>
> Grenoble INP ESISAR P2013 - Fili�re IR

>
> Grenoble INP ENSIMAG/UJF - Master M2P SCCI
>
> Tel : 06 62 50 77 83
>

> --
> You received this message because you are subscribed to the Google
> Groups "d3-js" group.
> To unsubscribe from this group and stop receiving emails from it, send

> an email to d3-js+un...@googlegroups.com.

[bastien dine]

Hi !

I find the solution for lag in firefox with SVG.

You need to disable hardware acceleration in Firefox.

• Tools > Options > Advanced > General > Browsing: "Use hardware acceleration when available"

I hope that will help you :)

Regards,

Le mercredi 24 avril 2013 10:35:46 UTC+2, bastien dine a écrit :

[Miguel Pignatelli]

On 07/05/13 10:25, bastien dine wrote:
> Hi !
>
> I find the solution for lag in firefox with SVG.
>
> You need to disable hardware acceleration in Firefox.
>

> * Tools > Options > Advanced > General > Browsing: "Use hardware

> acceleration when available"
>
> I hope that will help you :)
>

No, this is not working for me. Firefox still painfully slow even with
that option switched off.
But even if it had worked I wouldn't be any happy with this solution. I
can't ask the users of a site to change the options in Firefox and
restore them back once they are leaving.

Anyway... thanks a lot for sharing the tip.
I will post here any progress.

Cheers,

M;


> Regards,
>
>
>
> Le mercredi 24 avril 2013 10:35:46 UTC+2, bastien dine a �crit :

>
> Hi everybody,
>
> I'm developping a network cartography feature for my company, and i
> plan to use D3 for the network visualization.
> After some tests, I've juste encountered a major issue :
> I'm using the force directed graph layout and i've a JSON file
> which contains about 110 nodes, and each node have a picture.
> The matter is : when after the graph is drawn, all the
> interaction with it is slow, in fact my browser runs in slow-motion.
>
> I read that D3 could handle a graph with a large numbers of nodes,
> what could be the cause of this slowing down ?
>
> Regards,
>

[Miguel Pignatelli]

Just to report my latests findings on this issue.

To summarize what the problem is:
SVG performance is rather poor in Firefox when panning svg images
(compared to Chrome, Safari and Opera --at least).

I have filed a bug in Firefox bug tracker:

https://bugzilla.mozilla.org/show_bug.cgi?id=873425

If anyone wants to comment on the issue, you are welcome.

Cheers,

M;

On 02/05/13 15:33, bastien dine wrote:

[Damon Cokenias]

Recent stable versions of FireFox have poor SVG performance. Sounds like this may be fixed in the nightly builds.  See http://blog.concord.org/serious-performance-regression-in-firefox-18-and-newer

[Miguel Pignatelli]

The first comment they have made to the issue was asking me to test on
Nightly because they have improved SVG performance lately.
Unfortunately, it didn't make any difference (at least not yet in
Nightly). See the comments to the issue for more details.

Cheers,

M;

[Chandra]

I am still facing this issue in FF 23. Any luck guys.

Infact as proposed in this thread Iam using def's for images. But no improvements.

Thanks,

Chandra

[Douglas Duhaime]

It's now 2017 and this still appears to be a major issue for FF: painting svg images with xlink:href inside an image tag is still very very slow. If others have discovered good workarounds or alternative DOM/SVG elements that perform better, I'd love to hear from you.