1 2//D3.css 3 4 5 /* 6 function D3node_set_focus(field_id) { 7 console.log("D3node_set_focus()") 8 console.log(field_id) 9 10 11 d3.selectAll(".node") 12 .selectAll("circle") 13 .style("stroke","none") 14 15 16 if(field_id) { 17 d3.selectAll(".node") 18 .filter(function(d,i) { return (d.field_id == field_id)}) 19 .selectAll("circle") 20 .style("stroke-width","3px") 21 .style("stroke","#F00") 22 } 23 // .datum().viz_focus = true ; 24} 25*/ 26 27function wrap(text, width) { 28 text.each(function () { 29 var text = d3.select(this), 30 words = text.text().split(/\s+/).reverse(), 31 word, 32 line = [], 33 lineNumber = 0, 34 lineHeight = 1.1, // ems 35 x = text.attr("x"), 36 y = text.attr("y"), 37 dy = 0, //parseFloat(text.attr("dy")), 38 tspan = text.text(null) 39 .append("tspan") 40 .attr("x", x) 41 .attr("y", y) 42 .attr("dy", dy + "em"); 43 while (word = words.pop()) { 44 line.push(word); 45 tspan.text(line.join(" ")); 46 if (tspan.node().getComputedTextLength() > width ) { 47 line.pop(); 48 tspan.text(line.join(" ")); 49 line = [word]; 50 tspan = text.append("tspan") 51 .attr("x", x) 52 .attr("y", y) 53 .attr("dy", ++lineNumber * lineHeight + dy + "em") 54 .text(word); 55 } 56 } 57 }); 58} 59 60function textSize(ptext) { 61 if (!d3) return; 62 var container = d3.select('body').append('svg'); 63 container.append('text') 64 .attr("x", -99999) 65 .attr("y", -99999) 66 .attr("class", "node_label") 67 .text(ptext); 68 69 var size = container.node().getBBox(); 70 // console.log(ptext+" "+size.width) 71 container.remove(); 72 return { width: size.width, height: size.height }; 73} 74 75function D3node_set_focus_node(node_id) { 76 console.log("D3node_set_focus_node()") 77 console.log(node_id) 78 79 d3.selectAll(".node") 80 .selectAll("circle") 81 .style("stroke","none") 82 83 if(node_id) { 84 d3.selectAll(".node") 85 .filter(function(d,i) { return (d.id == node_id)}) 86 .selectAll("circle") 87 .style("stroke-width","3px") 88 .style("stroke","#F00") 89 } 90 // .datum().viz_focus = true ; 91} 92 93function D3node_update_favorite() { 94 console.log("D3node_update_favorite()") 95 96 //les artistes 97 d3.selectAll(".circle_node") 98 .style('stroke', d => (d.favorite == 1)? "red":"none" ) 99 100 //les livres 101 d3.selectAll(".rect_book_node") 102 .style('stroke', d => (d.favorite == 1)? "red":"none" ) 103 104 d3.selectAll(".circle_focus_favorite") 105 .remove() 106 107 d3.selectAll(".circle_node") 108 .filter(d => (d.favorite == 1 && d.id == map_id && d.type == 'artist' )? true:false ) 109 .classed('favorite',true) 110 111 /* 112 d3.selectAll(".node") 113 .filter(d => (d.favorite == 1 && d.id == map_id && d.type == 'artist' )? true:false ) 114 .append('circle') 115 .attr('class',"circle_focus_favorite") 116 .attr('r', function(d){ return scale_item_nb_radius(d.popularity)+10 ;} ) 117 .style('stroke', "red" ) 118 .style('stroke-width', 2 ) 119 .attr("stroke-opacity", 0.7) 120 .style('fill', "none" ) 121 */ 122 123 d3.selectAll(".rect_focus_favorite") 124 .remove() 125 126 d3.selectAll(".node") 127 .filter(d => (d.favorite == 1 && d.id == map_id && d.type == 'book' )? true:false ) 128 .append('rect') 129 .attr('class',"rect_focus_favorite") 130 .attr("x", -70) 131 .attr("y", -43) 132 .attr("rx", 5) 133 .attr("ry", 5) 134 .attr("height",86) 135 .attr("width",195) 136 .style('fill', "none" ) 137 .style('stroke', d => (d.favorite == 1)? "white":"none" ) 138 139 140 141 142 143 144 145} 146 147/* 148 .append('circle') 149 .attr('class',"circle_focus_favorite") 150 .attr('r', function(d){ return scale_item_nb_radius(d.popularity)-6 ;} ) 151 .style('stroke', "white" ) 152 .style('stroke-width', 2 ) 153 .attr("stroke-opacity", 0.7) 154 .style('fill', "none" ) 155 */ 156 157 158function D3node_create_nodes(gnodes,dataset) { 159 160 161/* 162 nodeElements = gnodes.selectAll(".node") 163 .data(dataset.nodes, function (d) { return d.id }); 164 165 // console.log(nodeElements) 166 167
168 gnode = nodeElements.enter() 169 .append("g") 170 .attr("class","node") 171 .attr("id", function(d) {return d.id ;}) 172 173 gnode.append("circle") 174 .attr("r", function (d) {return 10;}) 175 .style("fill","#666") ; 176 177 gnode 178 .append("text") 179 .attr("class", "node_label") 180 .text(function(d) {return d.name ;}) 181 .attr("x",0) 182 .attr("y",4) 183 184 185 nodeElements.exit() 186 .remove(); 187 */ 188 189 190 nodeElements = gnodes.selectAll(".node") 191 .data(dataset.nodes, function (d) { return d.id }) 192 .join( 193 194 function(enter) { 195 196 return enter 197 .append("g") 198 .attr("class","node") 199 .attr("id", function(d) {return d.id ;}) 200 .classed("focus",function(d) {return (d.id == map_id)? "focus":"" ;}) 201 .on( 'mouseenter', function(d) { 202 203 d3.select(this).classed("focus", true); 204 d3.selectAll(".D3link").classed("focus", false); 205 d3.selectAll(".D3link").filter(function(t) {return ((t.target.id == d.id)||(t.source.id == d.id));}) 206 .classed("focus", true); 207 d3.select(this).selectAll(".btplay").style("visibility","visible") 208 d3.select(this).selectAll(".btheart").style("visibility","visible") 209 //create_halo_favorite_ux(100,d3.select(this).x,d3.select(this).y,true) ; 210 d3.select(this).selectAll(".circle_node").classed("focus", true); 211 d3.select(this).selectAll(".rect_book_node").classed("focus", true); 212 d3.select(this).style("cursor", "pointer"); 213 d3.select(this).raise() ; 214 }) 215 .on( 'mouseover', function(d) { 216 217 d3.select(this).classed("focus", true); 218 d3.selectAll(".D3link").classed("focus", false); 219 d3.selectAll(".D3link").filter(function(t) {return ((t.target.id == d.id)||(t.source.id == d.id));}) 220 .classed("focus", true); 221 d3.select(this).selectAll(".btplay").style("visibility","visible") 222 d3.select(this).selectAll(".btheart").style("visibility","visible") 223 //create_halo_favorite_ux(100,d3.select(this).x,d3.select(this).y,true) ; 224 d3.select(this).selectAll(".circle_node").classed("focus", true); 225 d3.select(this).selectAll(".rect_book_node").classed("focus", true); 226 d3.select(this).style("cursor", "pointer"); 227 d3.select(this).raise() ; 228 }) 229 .on( 'mouseout', function() { 230 231 232 d3.select(this).classed("focus", function(d) {return (d.id == map_id)}); 233 d3.selectAll(".D3link").classed("focus", function(d) {return ((d.target.id == map_id)||(d.source.id == map_id));}); 234 d3.select(this).selectAll(".btplay").style("visibility","hidden") 235 d3.select(this).selectAll(".btheart").style("visibility","hidden") 236 d3.selectAll(".circle_node").classed("focus", function(d) {return (d.id == map_id)? true:false ;}); 237 d3.selectAll(".rect_book_node").classed("focus", function(d) {return (d.id == map_id)? true:false ;}); 238 d3.select(this).style("cursor", "default"); 239 }) 240 241 242 .call(d3.drag() 243 .on('start', dragstarted) 244 .on('drag', dragged) 245 .on('end', dragended) 246 ) 247 .call( 248 g => g.filter(function(t) {return (t.type == "artist");}) 249 .append('circle') 250 .attr('class','circle_halo') 251 .attr('r', function(d){ return scale_item_nb_radius(d.popularity)+d.hotness*3/100+5 ;} ) 252 .attr("stroke", function(d){ return hotness_color_scale(d.hotness);}) 253 .attr("stroke-width", function(d){ return d.hotness*6/100 ;}) 254 ) 255 /* 256 .attr("stroke", function(d){ return hotness_color_scale(d.hotness);}) 257 .attr("stroke-width", function(d){ return scale_item_nb_radius(d.popularity)*d.hotness/1000+"px" ;}) 258 // .filter(function(d) {return (d.id == map_id)? true:false;}) 259 // .attr("fill", null) 260 // click_play_artist_event_handler(d.id,d.name) ; 261 */ 262 263 // .attr('r', function(d){ return Math.max(d3.select(this).node().parentNode.getBBox().width/2+35,textSize(d.name).width/2+38) ;} ) 264 // w = d3.select(this).node().parentNode.getBBox().width/2+40 ; 265 //.attr('r', function(d){ return scale_item_nb_radius(d.popularity)+35 ;} ) 266 // .append("path") 267 //.attr("d",'M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z') 268 269 270 .call( 271 g => g 272 .filter(function(t) {return (t.type == "artist");}) 273 .append('circle') 274 .attr('class',"circle_node") 275 .attr('r', function(d){ var r_pop = scale_item_nb_radius(d.popularity); r_txt = textSize(d.name).width/2 ; return ((r_pop-r_txt) <= 5)? (r_pop+10):r_pop ;} ) 276 .style('stroke', d => (d.favorite == 1)? "red":"none" ) 277 .style('stroke-width', 2 ) 278 .classed("focus",function(d) {return (d.id == map_id)? "focu
278s":"" ;}) 279 .on( 'click', function(d,i) { 280 console.log("click",d) 281 click_node_event_handler(d) ; 282 }) 283 284 ) 285 286 .call( 287 g => g.filter(function(t) {return (t.type == "serie");}) 288 .append("rect") 289 .attr('class',"rect_serie_node") 290 .classed("focus",function(d) {return (d.id == map_id)? "focus":"" ;}) 291 .attr("x", -71) 292 .attr("y", -52) 293 .attr("rx", 5) 294 .attr("ry", 5) 295 .attr("height",96) 296 .attr("width",205) 297 ) 298 299 300 .call( 301 g => g.filter(function(t) {return (t.type == "book" || t.type == "serie");}) 302 .append("rect") 303 .attr('class',"rect_book_node") 304 .classed("focus",function(d) {return (d.id == map_id)? "focus":"" ;}) 305 .attr("x", -75) 306 .attr("y", -48) 307 .attr("rx", 5) 308 .attr("ry", 5) 309 .attr("height",96) 310 .attr("width",205) 311 .style('stroke', d => (d.favorite == 1)? "red":"none" ) 312 .on( 'click', function(d,i) { 313 console.log("click",d) 314 click_node_event_handler(d) ; 315 }) 316 ) 317 318 .call( 319 g => g.filter(function(t) {return (t.type == "book" || t.type == "serie");}) 320 .append("image") 321 .attr("xlink:href", d=> d.img_url) 322 .attr("x", -70) 323 .attr("y", -43) 324 .attr("height",86) 325 .attr("width",60) 326 //.attr("transform", "scale(0.2)") 327 ) 328 329 //l'auteur 330 .call( 331 g => g.filter(function(t) {return (t.type == "book" || t.type == "serie");}) 332 .append("text") 333 .attr("class", "node_label") 334 .classed("author", true) 335 .text(function(d) { 336 if(d.author.length > 30) 337 return d.author.substring(0,25)+'...'; 338 else 339 return d.author; 340 341 }) 342 .attr("x",0) 343 .attr("y",39) 344 ) 345 346 347 348 349 .call( 350 //the heart 351 g => g.append("g") 352 .attr("class","btheart") 353 .style("opacity",1) 354 .style("visibility","hidden") 355 /* 356 .on( 'mouseenter', function(d) { 357 d3.select(this).style("opacity",1) 358 }) 359 .on( 'mouseover', function(d) { 360 d3.select(this).style("opacity",1) 361 }) 362 */ 363 /* 364 .on( 'mouseleave', function() { 365 //d3.select(this).style("opacity",d => (d.favorite == 1)? 1:0.01) 366 d3.select(this).style("opacity",0.01) 367 })*/ 368 369 .call( 370 g=>g.filter(function(t) {return (t.type == "artist");}) 371 .append('circle') 372 .attr('r', function(d){ return Math.max(scale_item_nb_radius(d.popularity)+35,textSize(d.name).width/2+38) ;} ) 373 .attr('r', function(d){ return Math.max(scale_item_nb_radius(d.popularity)+1,45) ;} ) 374 .attr('stroke', 'black') 375 .attr('fill', '#EEE') 376 .attr('fill-opacity', 0.7) 377 .attr('stroke-width', 0) 378 .on( 'click', function(d,i) { 379 console.log("click",d) 380 click_node_event_handler(d) ; 381 }) 382 //.filter(function(t) {return (t.type == "artist");}) 383 ) 384 385 //bt play artist 386 387 .call( 388 389 g=>g.filter(function(t) {return (t.type == "artist");}) 390 .append("g") 391 .attr("transform", "translate(-90 15)") 392 393 //.attr("id","bt_play_artist") 394 395 .call( 396 397 g=> g.append("rect") 398 .attr("class", "bt") 399 .attr("width",80).attr("height",30) 400 .attr("rx",30/2).attr("ry",30/2) 401 .on( 'mouseenter', function() { 402 d3.select(this).classed("focus", true); 403 }) 404 .on( 'mouseleave', function() { 405 d3.select(this).classed("focus", false); 406 }) 407 .on( 'click', function(d,i) { 408 click_node_btplay_event_handler(d.id,d.name,"playlist") 409 }) 410 411 ) 412 413 .call(g => g.append("g") 414 .attr("transform", "translate(20 -5)")
415 .append("polygon") 416 .attr("class","btplay") 417 .style("visibility","hidden") 418 .attr("points",(-20/2+3)+", "+(-20/2+20)+","+(-20/2+3)+","+(20/2+20)+" "+(+20/2+3)+",20") 419 .on( 'click', function(d,i) { 420 // console.log("click btplay ") ; 421 click_node_btplay_event_handler(d.id,d.name,"playlist") 422 }) 423 .on( 'mouseenter', function() { 424 d3.select(this).classed("btplay_focus",true) ; 425 }) 426 .on( 'mouseleave', function() { 427 d3.select(this).classed("btplay_focus",false) ; 428 }) 429 ) 430 431 .call(g => g.append("text") 432 .attr("class","bt_label") 433 .attr("x",40) 434 .attr("y",19) 435 .text("play") 436 ) 437 438 ) 439 440 441 442 //bt play similar artist 443 .call( 444 445 g=>g.filter(function(t) {return (t.type == "artist");}) 446 .append("g") 447 .attr("id","bt_play_similar_artist") 448 .attr("transform", "translate(10 15)") 449 450 .call( 451 452 g=> g.append("rect") 453 .attr("class", "bt") 454 .attr("width",132).attr("height",30) 455 .attr("rx",30/2).attr("ry",30/2) 456 .on( 'mouseenter', function() { 457 d3.select(this).classed("focus", true); 458 }) 459 .on( 'mouseleave', function() { 460 d3.select(this).classed("focus", false); 461 }) 462 .on( 'click', function(d,i) { 463 click_play_similar_artist_event_handler() 464 }) 465 466 ) 467 468 .call(g => g.append("g") 469 .attr("transform",function(d){ return 'translate(0 '+scale_item_nb_radius(d.popularity)+')'} ) 470 .attr("transform", "translate(20 -5)") 471 .append("polygon") 472 .attr("class","btplay") 473 .style("visibility","hidden") 474 .attr("points",(-20/2+3)+", "+(-20/2+20)+","+(-20/2+3)+","+(20/2+20)+" "+(+20/2+3)+",20") 475 .on( 'click', function(d,i) { 476 // console.log("click btplay ") ; 477 click_node_btplay_event_handler(d.id,d.name,"similar_playlist") 478 }) 479 .on( 'mouseenter', function() { 480 d3.select(this).classed("btplay_focus",true) ; 481 }) 482 .on( 'mouseleave', function() { 483 d3.select(this).classed("btplay_focus",false) ; 484 }) 485 ) 486 487 .call(g => g.append("text") 488 .attr("class","bt_label") 489 .attr("x",40) 490 .attr("y",19) 491 .text("play similar") 492 ) 493 494 ) 495 496 /* g.append("text") 497 .attr("id", "bt_launch_similar_radio") 498 .attr("x",35) 499 .attr("y",y+hauteur*2/3) 500 .text("<?php echo $trad[$lg]["similar_artists"] ;?>")*/ 501 502 //bt heart 503 .call( 504 g=>g.append("path") 505 .attr("class","btheart") 506 .attr("d",'M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z') 507 // .attr("transform", function(d) { 508 // wa = d3.select(this).node().parentNode.getBBox().width/8 ; 509 // wa = scale_item_nb_radius(d.popularity)+35-5 510 // wb = textSize(d.name).width/2+32 511 // console.log(d.name+" "+wa+" "+wb) 512 // w = Math.max(wa,wb) ; 513 // return "translate(-"+w+" -13) scale(0.05)" ; 514 // }) 515 .attr("transform", "translate(-12 -37) scale(0.05)") 516 .on( 'click', function(d,i) { 517 console.log("click heart") ; 518 519 520 var p = (d.favorite == 1)? 0:1 ; 521 console.log(d) ; 522 console.log("favorite = "+d+" "+d.favorite+" => "+p) ; 523 click_node_favorite_event_handler(d.id,d.name,p,d.type) 524 //D3node_update_favorite() ; 525 }) 526 .filter(function(t) {return (t.type == "book" || t.type == "serie");}) 527 .attr("transform", "translate(-52 -13) scale(0.05)") 528 529 ) 530 //bt play 531 /* 532 .call( 533 g => g.filter(function(t) {return (t.type == "artist");}) 534 .append("g") 535 .attr("transform",function(d){ return 'translate(0 '+scale_item_nb_radius(d.popularity)+')'} ) 536 .attr("transform", "translate(20 5)")
537 .append("polygon") 538 .attr("class","btplay") 539 .style("visibility","hidden") 540 .attr("points",(-20/2+3)+", "+(-20/2+20)+","+(-20/2+3)+","+(20/2+20)+" "+(+20/2+3)+",20") 541 .on( 'click', function(d,i) { 542 // console.log("click btplay ") ; 543 click_node_btplay_event_handler(d.id,d.name) 544 }) 545 .on( 'mouseenter', function() { 546 d3.select(this).classed("btplay_focus",true) ; 547 }) 548 .on( 'mouseleave', function() { 549 d3.select(this).classed("btplay_focus",false) ; 550 }) 551 ) */ 552 ) 553 554 .call( 555 g => g.append("text") 556 .attr("class", "node_label") 557 .text(function(d) { 558 if(d.name.length > 63) 559 return d.name.substring(0,60)+'...'; 560 else 561 return d.name; 562 }) 563 .attr("x",0) 564 .attr("y",4) 565 .filter(function(t) {return (t.type == "book" || t.type == "serie");}) 566 .classed("book", true) 567 .attr("y",-25) 568 .call(wrap, 120) 569 ) 570 571 .call( 572 g => g.filter(function(t) {return (t.type == "serie");}) 573 .append("text") 574 .attr("class", "node_label") 575 .text(function(d) { return d.tomes_nb+" tomes";}) 576 .classed("book", true) 577 .attr("x",0) 578 .attr("y",20) 579 ) 580 581 /* 582 .call( 583 g => g 584 .filter(d => (d.favorite == 1 && d.id == map_id )? true:false ) 585 .append('circle') 586 .attr('class',"circle_focus_favorite") 587 .attr('r', function(d){ return scale_item_nb_radius(d.popularity)-6 ;} ) 588 .style('stroke', "white" ) 589 .style('stroke-width', 2 ) 590 .style('fill', "none" ) 591 ) 592 */ 593 594 595 596 597 598 599 600 601 602 603 604 605 606 }, 607 function(update) { 608 return update 609 .attr("id", function(d) {return d.id ;}) 610 .classed("focus",function(d) {return (d.id == map_id)? "focus":"" ;}) 611 //.style("fill","#0F0") 612 }, 613 function(exit) { 614 return exit 615 .transition().duration(400) 616 .style("opacity",0) 617 .attr("transform",function() {return "translate("+Math.random()*1600+" "+Math.random()*16000+")" ;}) 618 .remove(); 619 } 620 621 622 ) 623 624 625 626 627 628 629 630 631 632 633 } 634 635 // drag nodes 636function dragstarted(d) { 637 if (!d3.event.active) simulation.alphaTarget(0.3).restart(); 638 d.fx = d.x; 639 d.fy = d.y; 640} 641function dragged(d) { 642 d.fx = d3.event.x; 643 d.fy = d3.event.y; 644} 645function dragended(d) { 646 if (!d3.event.active) simulation.alphaTarget(0); 647 d.fx = null; 648 d.fy = null; 649 d3.select(this).classed("fixed", d.fixed = false); 650 651} 652 653
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.