score:2

Finally figured how to do it. I moved the circles on the zoomable layer. Now everything works as magic. I'm posting only the modifications:

            var zoomable_layer = svg.append( "g" );

            // var zoom = d3.zoom().on("zoom", zoomed).scaleExtent([1 / 10, 30]);
            var zoom = d3.zoom()
                .scaleExtent([1 / 10, 30])
                .on("zoom", () => {
                    zoomable_layer.attr("transform", d3.event.transform )
                });

            var zz = graph.nodes.map( function ( n ) { return n.value } );
            var max = d3.max( zz );
            var scale = d3.scaleLinear().domain( [0, max] ).range( [5, 50] );

            var zz1 = graph.links.map( function ( n ) { return n.value } );
            var max1 = d3.max( zz1 );
            var scale1 = d3.scaleLinear().domain( [0, max1] ).range( [0, 50] );

            for ( var xx in graph.links )
            {
                xx.value = scale1( xx.value );
            }

            svg.call(zoom);
            svg.call(zoom.transform, d3.zoomIdentity.translate(width/2, height/2).scale(0.1));

            var link = zoomable_layer
                .attr("class", "links")
                .selectAll("line")
                .data(graph.links)

            var node = zoomable_layer
                .attr("class", "nodes")
                .selectAll("circle")
                .data(graph.nodes)
                .enter().append("circle")
                .attr( "r", function ( d ) { return scale( d.value ); } )
                .attr("cx", function (d, i) { return d.x })
                .attr("cy", function (d, i) { return d.y })
                .attr("cursor", "pointer")
                .attr("fill", function(d) { return color(d.group); })
                .on("click", function(d){
                    self.emitter.fire(consts.EVENT_SHOW_NODE_INFO, self.component, {_id : d.id});
                });

            svg.append("text")
                .attr("x", (200))
                .attr("y", height-20)
                .attr("text-anchor", "middle")
                .style("font-size", "16px")
                .style("font-style", "italic")
                .style('fill', 'orange')
                .text("Scroll to zoom in and out and explore the clusters of entities.");

            node.append("title")
                .text(function(d) { var arr = d.id.split(":"); let t = arr[arr.length-1]; return t; });

Related Query

More Query from same tag