chart = { const wrapper = d3.create("div").attr("class", "chart"); const svg = wrapper.append("svg").attr("height", height).attr("width", width); //Tooltip const tooltip = wrapper .append("div") .attr("class", "tooltip-for-chart") .attr("id", "tooltip-vis-map") .html( `` ) .style("opacity", 0); //xAxis: case let xAxisDraw = svg .append("g") .attr("id", "xAxis") .call(xAxis) .style("transform", `translateY(${height * 0.55}px)`) .style("color", "#838383"); //Text Axis xAxisDraw .append("text") .attr("id", "text-xAxis") .attr("x", width / 2) .attr("y", 50) .style("font-size", "12px") .style("fill", "#838383") .style("font-family", "Helvetica") .text("Case index"); //Create text lengend case for each circle const textCaseChart = svg.append("g").attr("class", "case-text"); data.nodes.map((d) => { textCaseChart .append("text") .attr("id", `case-${d.case}`) .datum(d) .attr("x", x(d.case) - 2) .attr("y", height / 2 + 20) .style("font-size", "12px") .text(`${d.case}`); }); //Create Path const arcs = svg.append("g"); arcs .selectAll("path") .data(data.link) .join("path") .attr("id", (d, i) => `node-${i}`) .attr("fill", "none") .attr("stroke", "#e8e8e8") .attr("stroke-width", 1.5) .attr("d", (d) => arc(d)); //Create circle const circleChart = svg.append("g"); data.nodes.map((d) => { circleChart .append("circle") .attr("id", `case-${d.case}`) .datum(d) .attr("cx", x(d.case)) .attr("cy", height / 2) .attr("r", circleSize(data.nodes.length)) .attr("fill", "#5ac8c8"); }); circleChart.selectAll("circle").on("mouseover", (event, datum) => { //Tooltip rectMouseOverStack(event, datum, x); //Highlight mouseover circle d3.select(event.target).classed("hover", true); //Highlight arc line arcs .selectAll("path") .filter((d, i) => d.target === datum.case || d.source === datum.case) .classed("hover", true); //Highlight circle let activeCircle = []; data.link.map((d) => { if (datum.case === d.source) { activeCircle.push(d.target); } if (datum.case === d.target) { activeCircle.push(d.source); } }); activeCircle.map((d) => { circleChart .selectAll("circle") .filter((j, k) => j.case === d) .classed("hover", true); textCaseChart .selectAll("text") .filter((j, k) => j.case === d) .classed("hover", true); }); }); circleChart.selectAll("circle").on("mouseout", (event, datum) => { //Tooltip rectMouseLeaveStack(); //Highlight circle d3.select(event.target).classed("hover", false); arcs .selectAll("path") .filter((d, i) => d.target === datum.case || d.source === datum.case) .classed("hover", false); let activeCircle = []; data.link.map((d) => { if (datum.case === d.source) { activeCircle.push(d.target); } if (datum.case === d.target) { activeCircle.push(d.source); } }); activeCircle.map((d) => { circleChart .selectAll("circle") .filter((j, k) => j.case === d) .classed("hover", false); textCaseChart .selectAll("text") .filter((j, k) => j.case === d) .classed("hover", false); }); }); return wrapper.node(); }