Unverified Commit 2f722920 authored by Pierre-Jean CHANCELLIER's avatar Pierre-Jean CHANCELLIER Committed by GitHub

Add files via upload

parent e8bfd515
body{background : black;}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.tooltip {
position: absolute;
top: 100px;
left: 100px;
-moz-border-radius:5px;
border-radius: 5px;
border: 2px solid #000;
background: #fff;
opacity: .9;
color: black;
padding: 10px;
width: 400px;
font-size: 12px;
z-index: 10;
}
.tooltip .title {font-size: 13px;}
.tooltip .name {font-weight:bold;}
.slider .tooltip{display:none;}
.links line {stroke: #999;stroke-opacity: 0.6;}
.nodes, .slider-handle, #plus, #moins{cursor: pointer;}
/* Boutons de navigation */
#controls{ top: 100px;position: absolute;left: 115px;}
#controls button{display: inherit;position: relative;width:46px;height:38px;}
#zoom {position:relative;left:15px;font-size:20px;color: #FFF;}
#right{right: -50px;top:-113px;}
#left{left: -50px;top:-75px;}
#top{top:-5px;}
#play{top:-30px;}
#down{bottom:-5px;}
#plus{top: -20px;position: relative;left: -20px;}
#moins{top: -250px;position: relative;left: -20px;}
#ex4 .slider-selection {background: #BABABA;}
@media screen and (min-width: 1600px) {
.container {
max-width:1500px;
}
}
\ No newline at end of file
[{000214A0-0000-0000-C000-000000000046}]
Prop3=19,11
[InternetShortcut]
URL=https://www.json-generator.com/
IDList=
{
"nodes":[
'{{repeat(10)}}',
{
id:'{{index()}}',
pubkey: '{{guid()}}',
degree_layout: '{{integer(5, 60)}}',
referent: '{{bool()}}',
name: '{{firstName()}}',
x:'{{integer(100, 800)}}',
y:'{{integer(100, 800)}}'
}
],
"links":[
'{{repeat(30)}}',
{
id:'{{index()}}',
source:"'{{integer(0, 10)}}'",
target:"'{{integer(0, 10)}}'"
}
]
}
\ No newline at end of file
{
"nodes": [
{
"id": 0,
"pubkey": "f690ca8a-ec59-43c1-aa16-21ac78dcc042",
"degree_layout": 26,
"referent": true,
"name": "Strong",
"x": 367,
"y": 444
},
{
"id": 1,
"pubkey": "065fc279-1b0e-407d-b00a-a7391c1c57dc",
"degree_layout": 26,
"referent": true,
"name": "Hallie",
"x": 718,
"y": 673
},
{
"id": 2,
"pubkey": "b7e3a13e-fe55-42d4-b9ed-d8380e3feb70",
"degree_layout": 45,
"referent": false,
"name": "Jolene",
"x": 275,
"y": 239
},
{
"id": 3,
"pubkey": "a92b2fc8-d08c-4853-a1af-9f42a7c402a2",
"degree_layout": 31,
"referent": false,
"name": "Shanna",
"x": 552,
"y": 589
},
{
"id": 4,
"pubkey": "fb00bfcd-a53b-4045-9b64-b7caa1bc8e2f",
"degree_layout": 47,
"referent": true,
"name": "Henson",
"x": 124,
"y": 645
},
{
"id": 5,
"pubkey": "1206986e-ca9f-4f1f-98a0-f976f94ff7e9",
"degree_layout": 37,
"referent": false,
"name": "Sharlene",
"x": 486,
"y": 167
},
{
"id": 6,
"pubkey": "5a70e16f-84af-469f-9a9c-408cda62aa58",
"degree_layout": 23,
"referent": true,
"name": "Head",
"x": 351,
"y": 471
},
{
"id": 7,
"pubkey": "177ba2d8-acb6-4c3b-aa03-39cbc4ced889",
"degree_layout": 24,
"referent": false,
"name": "Newton",
"x": 302,
"y": 350
},
{
"id": 8,
"pubkey": "e75734b7-4ccc-4457-a8ec-8ec771958a69",
"degree_layout": 46,
"referent": true,
"name": "Yates",
"x": 413,
"y": 730
},
{
"id": 9,
"pubkey": "c637898b-ccbf-4304-a318-3b4d3a08baeb",
"degree_layout": 9,
"referent": true,
"name": "Gordon",
"x": 739,
"y": 632
}
],
"links": [
{
"id": 0,
"source": "1",
"target": "8"
},
{
"id": 3,
"source": "6",
"target": "4"
},
{
"id": 6,
"source": "0",
"target": "8"
},
{
"id": 7,
"source": "9",
"target": "8"
},
{
"id": 8,
"source": "2",
"target": "5"
},
{
"id": 9,
"source": "1",
"target": "3"
},
{
"id": 10,
"source": "6",
"target": "9"
},
{
"id": 11,
"source": "6",
"target": "7"
},
{
"id": 12,
"source": "6",
"target": "9"
},
{
"id": 13,
"source": "3",
"target": "4"
},
{
"id": 14,
"source": "2",
"target": "1"
},
{
"id": 16,
"source": "2",
"target": "5"
},
{
"id": 17,
"source": "1",
"target": "8"
},
{
"id": 18,
"source": "9",
"target": "8"
},
{
"id": 19,
"source": "4",
"target": "3"
},
{
"id": 20,
"source": "4",
"target": "1"
},
{
"id": 21,
"source": "5",
"target": "7"
},
{
"id": 22,
"source": "5",
"target": "2"
},
{
"id": 23,
"source": "4",
"target": "9"
},
{
"id": 24,
"source": "2",
"target": "1"
},
{
"id": 26,
"source": "2",
"target": "8"
},
{
"id": 27,
"source": "6",
"target": "0"
},
{
"id": 28,
"source": "9",
"target": "4"
},
{
"id": 29,
"source": "0",
"target": "3"
}
]
}
\ No newline at end of file
This diff is collapsed.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Test pour D3JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper" class="container">
<div class="row"><div class="col-xs-12"><div id="graph" style="display:inline-block;"></div></div></div>
<div id="controls">
<div id="zoom">
<input id="ex4" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="20" data-slider-orientation="vertical"/>
<div id="plus" class="noselect">+</div>
<div id="moins" class="noselect">-</div>
</div>
<div id="navigation">
<button id="top" type="button" class="btn btn-light" onClick="myWot.moveDrawBottom()"><img src="./img/circle-arrow-top.png" width="20" /></button>
<button type="button" class="btn btn-light" onClick="reset()"><img src="./img/repeat.png" width="20" /></button>
<button id="down" type="button" class="btn btn-light" onClick="myWot.moveDrawTop()"><img src="./img/circle-arrow-down.png" width="20" /></button>
<button id="left" type="button" class="btn btn-light" onClick="myWot.moveDrawRight()"><img src="./img/circle-arrow-left.png" width="20" /></button>
<button id="right" type="button" class="btn btn-light" onClick="myWot.moveDrawLeft()"><img src="./img/circle-arrow-right.png" width="20" /></button>
</div>
<button id="play" type="button" class="btn btn-light" onClick="togglePlay()"><img src="img/pause.png" height="20" /></button>
</div>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.min.js"></script>
<script src="js/vendor/tooltip.js"></script>
<script src="js/helpers.js"></script>
<script src="js/graph.js"></script>
<script>
var mySlider = $('#ex4').slider({
id: 'ex4',
reversed: false,
step: 1,
min: 0,
max: 20,
value: 0
});
mySlider.on("change", function(slideEvt) {
myWot.setZoom(slideEvt.value.newValue);
});
$('#plus').on("click", function(){
var tmp = mySlider.slider("getValue")+1;
mySlider.slider("setValue",tmp);
myWot.setZoom(tmp);
});
$('#moins').on("click", function(){
var tmp = mySlider.slider("getValue")-1;
mySlider.slider("setValue",tmp);
myWot.setZoom(tmp);
});
function togglePlay(){
if (myWot.isPaused()){
myWot.play();
$('#play img').attr("src", "img/pause.png");
}else{
myWot.pause();
$('#play img').attr("src", "img/play.png");
}
}
function reset(){
var tmp = 0;
mySlider.slider("setValue",tmp);
myWot.liberer();
}
var myWot = wot();
function display(error, data) {
if (error) {console.log(error);}
myWot('#graph', data);
setTimeout(myWot.adaptLayer, 500);
}
d3.json('data/wot.d3js.json', display);
//d3.json('data/datatest.json', display);
</script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
/*
* Helper function to convert a number into a string
* and add commas to it to improve presentation.
*/
function addCommas(nStr) {
nStr += '';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
// Fonction qui rcupre la taille du navigateur
function getBrowserSize(){
var size = new Array();
if( typeof( window.innerWidth ) == 'number' ){
size[0] = window.innerWidth;
size[1] = window.innerHeight;
}else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ){
size[0] = document.documentElement.clientWidth;
size[1] = document.documentElement.clientHeight;
}else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ){
size[0] = document.body.clientWidth;
size[1] = document.body.clientHeight;
}else{
size[0] = -1;
size[1] = -1;
}
return size;
}
function roundFloat(value){
return value.toFixed(2);
}
function getTransformation(transform) {
// Create a dummy g for calculation purposes only. This will never
// be appended to the DOM and will be discarded once this function
// returns.
var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
// Set the transform attribute to the provided string value.
g.setAttributeNS(null, "transform", transform);
// consolidate the SVGTransformList containing all transformations
// to a single SVGTransform of type SVG_TRANSFORM_MATRIX and get
// its SVGMatrix.
var matrix = g.transform.baseVal.consolidate().matrix;
// Below calculations are taken and adapted from the private function
// transform/decompose.js of D3's module d3-interpolate.
var {a, b, c, d, e, f} = matrix; // ES6, if this doesn't work, use below assignment
// var a=matrix.a, b=matrix.b, c=matrix.c, d=matrix.d, e=matrix.e, f=matrix.f; // ES5
var scaleX, scaleY, skewX;
if (scaleX = Math.sqrt(a * a + b * b)) a /= scaleX, b /= scaleX;
if (skewX = a * c + b * d) c -= a * skewX, d -= b * skewX;
if (scaleY = Math.sqrt(c * c + d * d)) c /= scaleY, d /= scaleY, skewX /= scaleY;
if (a * d < b * c) a = -a, b = -b, skewX = -skewX, scaleX = -scaleX;
return {
translateX: e,
translateY: f,
rotate: Math.atan2(b, a) * 180 / Math.PI,
skewX: Math.atan(skewX) * 180 / Math.PI,
scaleX: scaleX,
scaleY: scaleY
};
}
\ No newline at end of file
/*
* Creates tooltip with provided id that
* floats on top of visualization.
* Most styling is expected to come from CSS
* so check out bubble_chart.css for more details.
*/
function floatingTooltip(tooltipId, width) {
// Local variable to hold tooltip div for
// manipulation in other functions.
var tt = d3.select('body')
.append('div')
.attr('class', 'tooltip')
.attr('id', tooltipId)
.style('pointer-events', 'none');
// Set a width if it is provided.
if (width) {
tt.style('width', width);
}
// Initially it is hidden.
hideTooltip();
/*
* Display tooltip with provided content.
*
* content is expected to be HTML string.
*
* event is d3.event for positioning.
*/
function showTooltip(content, event) {
tt.style('opacity', 1.0)
.html(content);
updatePosition(event);
}
/*
* Hide the tooltip div.
*/
function hideTooltip() {
tt.style('opacity', 0.0);
}
/*
* Figure out where to place the tooltip
* based on d3 mouse event.
*/
function updatePosition(event) {
var xOffset = 20;
var yOffset = 10;
var ttw = tt.style('width');
var tth = tt.style('height');
var wscrY = window.scrollY;
var wscrX = window.scrollX;
var curX = (document.all) ? event.clientX + wscrX : event.pageX;
var curY = (document.all) ? event.clientY + wscrY : event.pageY;
var ttleft = ((curX - wscrX + xOffset * 2 + ttw) > window.innerWidth) ?
curX - ttw - xOffset * 2 : curX + xOffset;
if (ttleft < wscrX + xOffset) {
ttleft = wscrX + xOffset;
}
var tttop = ((curY - wscrY + yOffset * 2 + tth) > window.innerHeight) ?
curY - tth - yOffset * 2 : curY + yOffset;
if (tttop < wscrY + yOffset) {
tttop = curY + yOffset;
}
tt
.style('top', tttop + 'px')
.style('left', ttleft + 'px');
}
return {
showTooltip: showTooltip,
hideTooltip: hideTooltip,
updatePosition: updatePosition
};
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment