chart = { const off = 6; // 6 const rayon = 1.3; // 1.5 const font = 6.5; // 8 const fontRoot = 9; // 9 const fontLevel2 = 7.5; const fontLevel3 = 6.5; const fontLevel4 = 6.5; const fontLeaf = 6; const arbre1 = { name: "Right Mindfulness", color: arbre1Col }; const root = tree(d3.hierarchy(data)); const currentColor = null; root.descendants().forEach((d) => { // this allows tu use Sutta Ref in chart. if (d.data.name.includes("[")) { const regexSutta = /(?<=\[).*(?=\])/g; // this breaks safari because it cannot do lookaheads... const regexName = /^.*(?= \[)/gm; // needs a space before the bracket const suttaRefString = d.data.name.match(regexSutta); const suttaRefArray = suttaRefString[0].split(", "); const nameRef = d.data.name.match(regexName); d.data.name = nameRef[0]; d.data.ref = suttaRefArray; } }); const svg0 = d3.create("svg"); const svg = svg0.append("svg"); // const svg = d3.create("svg").attr("viewBox", [-400, -400, width, height]); const path = svg .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 1) // 0.4 .attr("stroke-width", 0.5) // 1 .selectAll("path") .data(root.links()) .join("path") .attr("stroke", (d) => { let node = d.source; for (let k = 0; k < 4; k++) { if (node.ancestors().includes(root.children[k])) { return colori[k + 1]; } else if (node == root) { return colori[0]; } } }) .attr( "d", d3 .linkRadial() .angle((d) => d.x) .radius((d) => d.y) ) .attr("stroke-width", (d) => { if (d.target.data.name == "@") { return 0; } }); // .attr("transform", (d) => `translate(${d})`); const circle = svg .append("g") .selectAll("circle") .data(root.descendants()) .join("circle") .attr( "transform", (d) => ` rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) ` ) .attr("fill", (d) => (d.children ? "#555" : "#999")) .attr("fill", color1) .attr("fill", (d) => { const node = d; for (let k = 0; k < 4; k++) { // ARBRE COLOR // for (let j = 0; j < node.ancestors().length; j++) { // if (node.ancestors()[j].data.name == arbre1.name) { // return arbre1.color; // } // } if (node.ancestors().includes(root.children[k])) { // return color(root.children[k].data.name); if (node.children) { return colori[k + 1]; } else { return coloriFade[k + 1]; } } else if (node == root) { return colori[0]; } } }) .attr("r", (d) => { const name = d.data.name; if (name == "" || name == "@") { return 0; } else { return rayon; } }); // .attr("transform", (d) => `translate(${d})`); const text = svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", font) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("text") .data(root.descendants()) .join("text") .attr("fill", (d) => { const node = d; // console.log(node.ancestors().length); // for i in ancestors if inclides then red for (let k = 0; k < 4; k++) { // ARBRE COLOR // for (let j = 0; j < node.ancestors().length; j++) { // if (node.ancestors()[j].data.name == arbre1.name) { // return arbre1.color; // } // } if (node.ancestors().includes(root.children[k])) { // return color(root.children[k].data.name); return colori[k + 1]; } else if (node == root) { return colori[0]; } } }) .attr( "transform", (d) => ` rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0}) ` ) .attr("dy", "0.31em") // .attr("font-size", (d) => { // if (d == root.descendants().first()) { // return fontRoot; // } // 11 or 12 // else if (d.children) { // return font; // } // 10 or 11 // else { // return font; // } // }) .attr("font-size", (d) => { if (d.depth == 0) { return fontRoot; } // 11 or 12 else if (d.depth == 1) { return fontLevel2; } // 10 or 11 else if (d.depth == 2) { return fontLevel3; } // 10 or 11 else if (d.depth == 3) { return fontLevel4; } // 10 or 11 else if (!d.children) { return fontLeaf; } // 10 or 11 else { return font; } }) .attr("x", (d) => { // d.x < Math.PI === !d.children ? 6 : -6; if (d.data.name.includes("*")) { return d.x < Math.PI ? off : -off; } else if (d.data.name.includes("%")) { return d.x < Math.PI ? -off : off; } else { return d.x < Math.PI === !d.children ? off : -off; } }) .attr( "text-anchor", // (d) => (d.x < Math.PI === !d.children ? "start" : "end") (d) => { if (d.data.name.includes("*")) { // ne sert à rien pour l'instant return d.x < Math.PI ? "start" : "end"; } else if (d.data.name.includes("%")) { // ne sert à rien pour l'instant return d.x < Math.PI ? "end" : "start"; } else { return d.x < Math.PI === !d.children ? "start" : "end"; } } ) .text((d) => d.data.name.replace("*", "").replace("%", "").replace("@", "")) // * dans le nom place derière % devant .clone(true) .lower() .attr("stroke", "white"); // .attr("transform", (d) => `translate(${d})`); return svg.attr("viewBox", autoBox).node(); // no zoom // Zoom // // zoom from https://observablehq.com/@d3/zoom-svg-rescaled?collection=@d3/d3-zoom // svg.attr("viewBox", autoBox).node(); // svg.call( // d3 // .zoom() // .extent([ // [0, 0], // [width, height] // ]) // .scaleExtent([1, 8]) // .on("zoom", zoomed) // ); // function zoomed({ transform }) { // svg.attr("transform", transform); // } // return svg.node(); }