25:["$","title",null,{"children":"分堆 + 底色尽量避免重叠 + 底色描边 | PersLEARN Visualization | Observable"}] 49:T1f70,chart = { replay; const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g"); const preNodes = frameData.nodes; const preLinks = frameData.links; console.log("preNodes", preNodes); console.log("preLinks", preLinks); const nodes = preNodes.map((item, index)=>{ // const linkNodes = // return Object.assign(item, {index: item.ITPTid, linkNodes: linkNodes}) return Object.assign(item, {index: item.ITPTid, transform: 1}) }) const links = preLinks.map((item, index)=>{ let source, target; for(let node of nodes){ if(node.ITPTid == item.source){source = node} else if(node.ITPTid == item.target){target = node} } return { index: item.edgeId, edgeId: item.edgeId, content: item.content, source: source, target: target } }) console.log("links", links) console.log('nodes', nodes); const simulation = d3.forceSimulation(nodes) .force("forceMany", d3.forceManyBody().strength(-400)) .force("x", d3.forceX(width / 2).strength(0.1)) .force("y", d3.forceY(height / 2).strength(0.1)) .force("cluster", forceCluster()) .force("collide", d3.forceCollide(calCollide)) .force("link", d3.forceLink().links(links).id((d)=>d.index).strength(linkStrength).distance(calDistance)); const zoom = d3.zoom() .scaleExtent([0.1, 10]) .on("zoom", zoomed); svg.call(zoom) function calCollide(link) { return 40 } function calDistance(link) { if(link.source.tag == link.target.tag){ return 300 } else { return 500 } } function linkStrength(link) { if(link.source.tag == link.target.tag){ return 0.01 } else { return 0.01 } } function convexHulls(nodes) { // debugger; const offset = 8; let hulls = {}; // create point sets for (let k=0; k [v.x, v.y]).join("L") + "Z" } // 渐变色定义 const defs = svg.append("defs"); //插入defs const linearGradient1 = defs //defs中插入 .append("linearGradient") .attr("id", "gradient"); //设置对应id linearGradient1 //linearGradient中插入stop元素 .append("stop") .attr("offset", "0%") //设置坡度，下同 .attr("stop-color", d3.interpolateBlues(0));//设置对应颜色，下同 linearGradient1 .append("stop") .attr("offset", "100%") .attr("stop-color", d3.interpolateBlues(1)); const hulls = g .selectAll("path.hull") .data(convexHulls(nodes)) .enter().append("path") .attr("class", "hull") .attr("d", drawCluster) .attr("stroke", d => color(d.group)) .attr("stroke-width", 2) .attr("stroke-opacity", 0.4) .attr("fill-opacity", 0.05) .attr("fill", d => color(d.group)) const link = g .selectAll("line") .data(links) .join("line") .attr("stroke", "#999") .attr("stroke-opacity", 1) .attr("stroke-width", 0.5) .attr("stroke-linecap", "round") const text = g .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x+20) .attr("y", d => d.y) .attr("opacity", 0.8) .attr("fill", d => color(d.tag)) .attr("font-size", "20px") .text(d => `[ ${d.title} ${d.time} ]`) const nodeRing = g .selectAll("path.ring") .data(nodes) .join("path") .attr("transform", d=> { return `translate(${d.x} ${d.y})` }) .attr("fill", d => color(d.tag)) .attr("opacity", 0) .attr("d", d3.arc() .innerRadius( 10 ) .outerRadius( 8.5 ) .startAngle( 0 ) // It's in radian, so Pi = 3.14 = bottom. .endAngle( 7 ) // 2*Pi = 6.28 = top ) const node = g .selectAll("circle") .data(nodes) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("fill", d => color(d.tag)) .style("cursor", "pointer") .on("click", (e, d) => console.log('Node Click!', d)) .on("mouseover", (e, dNode) => { // e.target.style.fill="black"; const linkNodeArr = [] linkNodeArr.push(dNode.ITPTid) link.attr("opacity", dLink=>{ if(dLink.source.ITPTid==dNode.ITPTid){ linkNodeArr.push(dLink.target.ITPTid) return 1 } else if(dLink.target.ITPTid==dNode.ITPTid){ linkNodeArr.push(dLink.source.ITPTid) return 1 } else return 0.1 }) node.attr("opacity", d=>{ return linkNodeArr.indexOf(d.ITPTid)!=-1? 1 : 0.1 }) nodeRing.attr("opacity", d=>{ return linkNodeArr.indexOf(d.ITPTid)!=-1? 1 : 0 }) text.attr("opacity", d=>{ return linkNodeArr.indexOf(d.ITPTid)!=-1? 1 : 0.1 }).text(d=>{ return linkNodeArr.indexOf(d.ITPTid)!=-1? d.ITPTcontent : `[ ${d.title} ${d.time}]` }) hulls.attr("opacity", 0.1) }) .on("mouseout", (e, d) => { e.target.style.fill=color(d.tag) link.attr("opacity", 1) node.attr("opacity", 1) nodeRing.attr("opacity", 0) text.attr("opacity", d => d.transform.k<0.8 ? 1.5*d.transform.k-0.6 : 0.8) .text(d => `[ ${d.title} ${d.time}]`) hulls.attr("opacity", 1) }) .call(drag(simulation)); function zoomed({transform}) { g.attr("transform", transform); nodes.forEach(node => node.transform = transform) link.attr("stroke-width", 1/transform.k<0.5 ? 1/transform.k : 0.5) text.attr("opacity", transform.k<0.8 ? 1.5*transform.k-0.6 : 0.8) } node.transition() .delay((d, i) => Math.random() * 500) .duration(750) .attrTween("r", d => { const i = d3.interpolate(0, d.r); return t => d.r = 6 }); simulation.on("tick", () => { 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); nodeRing .attr("transform", d=> { return `translate(${d.x} ${d.y})` }) hulls .data(convexHulls(nodes)) .attr("d", drawCluster); text .attr("x", d => d.x+20) .attr("y", d => d.y); }); invalidation.then(() => simulation.stop()); // //get svg source. // let svg2 = document.getElementById("svg"); // var serializer = new XMLSerializer(); // var source = serializer.serializeToString(svg2); // //add name spaces. // if(!source.match(/^]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){ // source = source.replace(/^