Skip to content

Commit

Permalink
Sauvegarde avant transformation svg/groupe #56
Browse files Browse the repository at this point in the history
  • Loading branch information
@HugoCarton
HugoCarton committed Jul 12, 2024
1 parent 258ea0f commit 008e1d7
Showing 1 changed file with 227 additions and 90 deletions.
317 changes: 227 additions & 90 deletions test_parsing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,122 +86,247 @@ function buildNodes(edge, node_colors) { // Call a dataset and a list of pattern

const nodes = []

for (let i = 0; i < edge.length; i++) {
let node1, node2

let node1, node2
// node 1

// node 1
try {
node1 = {
id : edge.subject,
label : edge.subject,
color : node_colors[0],
place : "source",
zoom : false
}

try {
node1 = {
id : edge[i].subject,
label : edge[i].subject,
color : node_colors[0],
place : "source",
zoom : false
if (!(nodeAlreadyExist(node1, nodes))) {
nodes.push(node1)
} else {
let old_node = nodes.find(node => node.id === node1.id)
if (old_node.place === "target") {
old_node.place = "mix"
}

if (!(nodeAlreadyExist(node1, nodes))) {
nodes.push(node1)
} else {
let old_node = nodes.find(node => node.id === node1.id)
if (old_node.place === "target") {
old_node.place = "mix"
}
}

} catch(error) {
console.log("The dataset doesn't contain a subject")
}

// node 2
} catch(error) {
console.log("The dataset doesn't contain a subject")
}

try {
node2 = {
id : edge[i].object,
label : edge[i].object,
color : node_colors[1],
place : "target",
zoom : false
}
// node 2

if (!(nodeAlreadyExist(node2, nodes))) {
nodes.push(node2)
} else {
let old_node = nodes.find(node => node.id === node2.id)
if (old_node.place === "source") {
old_node.place = "mix"
}
}
try {
node2 = {
id : edge.object,
label : edge.object,
color : node_colors[1],
place : "target",
zoom : false
}

} catch(error) {
console.log("The dataset doesn't contain a target")
if (!(nodeAlreadyExist(node2, nodes))) {
nodes.push(node2)
} else {
let old_node = nodes.find(node => node.id === node2.id)
if (old_node.place === "source") {
old_node.place = "mix"
}
}

} catch(error) {
console.log("The dataset doesn't contain a target")
}

return nodes
}

function buildLinks(edge, link_color){

const links = []
let link

for (let i = 0; i < edge.length; i++) {
let link
let number = 0
// link

// link
try {
const source = edge.subject
const target = edge.object
const label = edge.predicate

try {
const source = edge[i].subject
const target = edge[i].object
const label = edge[i].predicate
link = {
source : source,
target : target,
label : label,
color : link_color
}

link = {
source : source,
target : target,
label : label,
id : number,
color : link_color
}
if (!(linkAlreadyExist(link, links))) {
links.push(link)
}

if (!(linkAlreadyExist(link, links))) {
links.push(link)
}
} catch (error) {
console.log("The dataset doesn't contain necessary elements to create the link.")
}

number += 1
} catch (error) {
console.log("The dataset doesn't contain necessary elements to create the link.")
}
}
return links
}

function graph_pattern(dataset, triples, node_colors = ["red", "blue"], link_color = "gold", strength = -50, width = null, height = null) {
function nodelink_creator(data, triples, nomgraph, node_colors = ["red", "blue"], link_color = "gold", mixed_color = null, strength = -50, width = 400, height = 400, node_named = true, link_named = true, node_zoom = true, zoom_strenght = 2, number_ticks = 500) {

// Initialisation
let nodes = buildNodes(triples, node_colors)
let links = buildLinks(triples, link_color)

console.log(dataset)
console.log(triples)
//console.log(triples[0])

console.log("nodes", nodes)
console.log("links", links)

let dataset_pattern = {nodes : nodes, links : links}
console.log(dataset_pattern)

const data_used = JSON.parse(JSON.stringify(dataset_pattern))

const margin = {top: 5, right: 5, bottom: 5, left: 5}

const nb_graphs = triples.length + 1
//console.log(nb_graphs)
const svg_used= d3.select("#"+nomgraph)

const width2 = width*0.9
const height2 = height*0.9

// Préparation des nodes et liens
const surface = Math.min(width2, height2)

let nodes = buildNodes(triples, node_colors)
let links = buildLinks(triples, link_color)
const zoom = d3.zoom()
.scaleExtent([0.1, 10]) // Define the zoom limits
.on('zoom', function(event) {
svg_graph.attr("transform", event.transform)
}, {passive : true})

d3.select("#nodelink_graph").call(zoom,
d3.zoom()
.on('zoom', function(event) {
svg_graph.attr('transform', event.transform)
}), {passive: true})


const link = svg_used.selectAll("line") // Create the multiple links between the nodes. Must be placed in the code BEFORE the nodes.
.data(data_used.links)
.join("line")
.attr("label", d => d.label)
.attr("id", d => d.id)
.style("stroke", d => d.color)

const col1 = new fabric.Color(node_colors[0])
const col2 = new fabric.Color(node_colors[1])

let rgb_node_colors = [col1, col2]
let color_mixed

if (mixed_color === null) { // Allow to use the color for the mix elements defined by the user, or to use the mix of the 2 node colors if none was choosen
color_mixed = color_merger(rgb_node_colors)
} else {
color_mixed = mixed_color
}

const node = svg_used.selectAll("circle") // Create the multiples nodes on the graph
.data(data_used.nodes)
.join("circle")
.attr("r", 0.01*surface)
.attr("label", d => d.label)
.attr("id", d => d.id)
.style("fill", function(d) {
if (d.place === "source") {
return node_colors[0]
} else if (d.place === "target") {
return node_colors[1]
} else {
return color_mixed
}
})

let zoomScale = 1

if (node_zoom === true) { // Allow to zoom on click on the nodes. Can be disabled by the user.

node.on("click", d => {
const choosen_id = d.target.getAttribute("id")
const choosen_node = d3.select('circle[label="' + choosen_id + '"]') // Focus on the clicked node
console.log(choosen_node)

let choosen_x
let choosen_y

if (choosen_node._groups[0][0].__data__.label === d.target.getAttribute("label")) {
choosen_x = choosen_node._groups[0][0].__data__.x
choosen_y = choosen_node._groups[0][0].__data__.y
}

if (choosen_node._groups[0][0].__data__.zoom === false) {
zoomScale = zoom_strenght
choosen_node.transition().attr("transform", `translate(${choosen_x}, ${choosen_y}) scale(${zoomScale}) translate(${-choosen_x}, ${-choosen_y})`)
// The zoom function contain some translations because without them, the zoom would replace all other changes, and that include the position.

choosen_node._groups[0][0].__data__.zoom = true
} else { // This part is for the dezoom.
zoomScale = 1
choosen_node.transition().attr("transform", `translate(${choosen_x}, ${choosen_y}) scale(${zoomScale}) translate(${-choosen_x}, ${-choosen_y})`)
choosen_node._groups[0][0].__data__.zoom = false
}
}, {passive : true})

}



let ticksCount = 0
// That line is linked to the .on("tick") in the next part. It allows the user to see the deployment of the nodes.

const simulation = d3.forceSimulation(data_used.nodes) // Compute the places of the nodes.
.force("link", d3.forceLink()
.id(d => d.id)
.links(data_used.links)
)
.force("charge", d3.forceManyBody().strength(strength))
.force("center", d3.forceCenter(width2 / 2, height2 / 2))
//.on("end", ticked)

.on("tick", function () {

ticked()
ticksCount++

if (ticksCount >= number_ticks) {
simulation.stop() // Stop the simulation after the specified number of ticks.
}
})


function ticked() { // Place the nodes and links.

link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y)

node
.attr("cx", d => d.x)
.attr("cy", d => d.y)
}

console.log("nodes", nodes)
console.log("links", links)
}

function graph_pattern(dataset, triples, node_colors = ["red", "blue"], link_color = "gold", strength = -50, width = null, height = null) {

// Initialisation

console.log(dataset)
console.log(triples)

const margin = {top: 5, right: 5, bottom: 5, left: 5}

const nb_graphs = triples.length

// Création des SVG

let width_used, height_used
/*let width_used, height_used
if (width === null) {
width_used = nb_graphs*100
Expand All @@ -213,48 +338,60 @@ function graph_pattern(dataset, triples, node_colors = ["red", "blue"], link_co
height_used = nb_graphs*100
} else {
height_used = height
}
}*/


const svg_total = d3.select("#pattern_graph") // Define the svg containing the graph and the legend.
let width_used = 100
let height_used = 100

const svg_total = d3.select("#pattern_graph")
.attr("width", width_used + margin.left + margin.right)
.attr("height", height_used + margin.top + margin.bottom)


const width2 = width_used*0.9
const height2 = height_used*0.9

let colors = ["blue", "red", "green", "purple"]

let parent = svg_total.append("svg")
.attr("id", "svg_enfant_0")
.attr("x", width*0.05)
.attr("y", height*0.05)
.attr("width", width2)
.attr("height", height2)
.attr("x", width_used*0.1)
.attr("y", height_used*0.1)
.attr("width", width_used*0.5)
.attr("height", height_used*0.5)
.attr("viewBox", "0 0 50 50")
.attr("style", `border: 1px solid ${colors[0]};`)

for (let i = 1; i < nb_graphs; i++) {
console.log(nb_graphs)
let i=1

do {
// Calcul de la taille réduite et le décalage pour chaque SVG imbriqué
let scale = (nb_graphs - i) / nb_graphs
console.log(scale)
let color = colors[i % colors.length]
console.log(width_used)
console.log(height_used)

// Création du nouveau svg

let enfant = parent.append("svg")
.attr("id", "svg_enfant_" + i)
.attr("x", width*scale)
.attr("y", height*scale)
.attr("x", width_used*scale)
.attr("y", height_used*scale)
.attr("width", width2*scale)
.attr("height", height2*scale)
.attr("style", `border: 1px solid ${color};`)

parent = enfant
}

i++

} while (i < nb_graphs+1)

for (let i = nb_graphs-1; i >= 0; i--) {
console.log(i)
let graph = d3.select("#svg_enfant_" + i)
console.log(graph)
let nomgraph = "svg_enfant_" +i
//nodelink_creator(dataset, triples[i], nomgraph, node_colors = ["red", "blue"], link_color = "gold", strength = -50, width = null, height = null)
}

}
Expand Down

0 comments on commit 008e1d7

Please sign in to comment.