viewof sunburst = { const root = partition(data); const svg = d3.create("svg"); // Make this into a view, so that the currently hovered sequence is available to the breadcrumb const element = svg.node(); element.value = { sequence: [], percentage: 0.0 }; // 使用foreignObject插入HTML const fo = svg .append("foreignObject") .attr("x", `${radius+50}px`) .attr("y", -10) .attr("width", radius*2) .attr("height", 350); const div = fo .append("xhtml:div") .style("color","#555") .style("font-size", "25px") .style("font-family", "Arial"); /*const tooltip = svg .append("title") .text("");*/ d3.selectAll("div.tooltip").remove(); // clear tooltips from before const tooltip = d3 .select("body") .append("div") .attr("class", `tooltip`) .style("position", "absolute") .style("opacity", 0) const label = svg .append("text") .attr("text-anchor", "middle"); //.style("visibility", "hidden"); label//內圈問題 .append("tspan") .attr("class", "question1") .attr("x", 0) .attr("y", 0) .attr("dx", `${radius*2+50}px`) .attr("dy", "-6em") .attr("font-size", "2.5em") .attr("fill", "#BBB") .text(innerCircleQuestion); label//外圈問題 .append("tspan") .attr("class", "question2") .attr("x", 0) .attr("y", 0) .attr("dx", `${radius*2+50}px`) .attr("dy", "-4em") .attr("font-size", "2.5em") .attr("fill", "#BBB") .text(outerCircleQuestion); label//答案 .append("tspan") .attr("class", "sequence") .attr("x", 0) .attr("y", 0) .attr("dx", `${radius*2+50}px`) .attr("dy", "-1em") .attr("font-size", "2.5em") .text(""); label//占比%數 .append("tspan") .attr("class", "percentage") .attr("x", 0) .attr("y", 0) .attr("dx", 0) .attr("dy", "0em") .attr("font-size", "5em") .attr("fill", "#555") .text(""); label//數量 .append("tspan") .attr("class", "dataValue") .attr("x", 0) .attr("y", 0) .attr("dx", 0) .attr("dy", "2em") .attr("font-size", "2em") .attr("fill", "#555") .text(""); svg .attr("viewBox", `${-radius} ${-radius} ${width*2.2} ${width}`) .style("max-width", `${width*2}px`) .style("font", "12px sans-serif"); const path = svg .append("g") .selectAll("path") .data( root.descendants().filter(d => { // Don't draw the root node, and for efficiency, filter out nodes that would be too small to see return d.depth && d.x1 - d.x0 > 0.001; }) ) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc); svg .append("g") .attr("fill", "none") .attr("pointer-events", "all") .on("mouseleave", () => { path.attr("fill-opacity", 1); //tooltip.text(""); //label.style("visibility", null); // Update the value of this view element.value = { sequence: [], percentage: 0.0 }; element.dispatchEvent(new CustomEvent("input")); }) .selectAll("path") .data( root.descendants().filter(d => { // Don't draw the root node, and for efficiency, filter out nodes that would be too small to see return d.depth && d.x1 - d.x0 > 0.001; }) ) .join("path") .attr("d", mousearc) .on("mouseover", (_evt, d) => { if(d.data.name === "減少包裝材及文宣印製") { tooltip .style("opacity", 1) .html(`減少包裝
`) .style("border-color", color(d.data.name)); } else if(d.data.name === "使用無毒媒材、再生材料、廢物利用素材等") { tooltip .style("opacity", 1) .html(`再生材料
`) .style("border-color", color(d.data.name)); } else if(d.data.name === "工作場所、活動展場的節約能源") { tooltip .style("opacity", 1) .html(`節約能源
`) .style("border-color", color(d.data.name)); } else { tooltip .style("opacity", 1) .html(`${d.data.name}`) .style("border-color", color(d.data.name)); } }) .on("mousemove", (evt, d) => { tooltip .style("top", evt.pageY - 10 + "px") .style("left", evt.pageX + 10 + "px"); }) .on("mouseout", () => { tooltip.style("opacity", 0); }) .on("mouseenter", (event, d) => { // Get the ancestors of the current segment, minus the root //introduce if(d.data.name === "工作室") { div .html("

定義：藝術家創作藝術品的私人空間。它可以是一個房間、一棟建築或任何專為藝術製作而設的場所。
功能：用於藝術家進行創作，例如繪畫、雕塑或任何其他形式的藝術。
特色：它是一個私密的空間，藝術家可以在這裡自由地實驗、嘗試並發展他們的技巧和創意。

"); } else if(d.data.name === "替代空間") { div .html("

定義：非傳統和非商業的展示空間。可以是臨時或長期的存在，但不同於傳統的美術館和畫廊。
功能：提供一個展示非主流、實驗性或邊緣藝術的場所。這些空間通常更加開放、靈活，能夠接受更多風格和形式的藝術品。
特色：是藝術家、策展人或社群自組、自發的，對於藝術家來說，這樣的空間提供了更多的自由和可能性。

"); } else if(d.data.name === "美術館") { div .html("

定義：為了展示、保護和研究藝術品而設立的公共或私人機構。
功能：除了展示藝術品，美術館也負責藝術品的保護、修復、研究和教育等功能。
特色：通常有較為正式和嚴謹的運作模式。它們可能有長期或特定主題的展覽，且會對藝術品有一定的選擇和評價標準。

"); } else { div.html(""); } //dataValue label .style("visibility", null) .select(".dataValue") .text("計數："+d.value); //question if(d.depth-1 === 0) { label .style("visibility", null) .select(".question1") .attr("fill", "#000"); label .style("visibility", null) .select(".question2") .attr("fill", "#BBB"); } else if(d.depth-1 === 1) { label .style("visibility", null) .select(".question1") .attr("fill", "#BBB"); label .style("visibility", null) .select(".question2") .attr("fill", "#000"); } const sequence = d .ancestors() .reverse() .slice(1); // Highlight the ancestors path.attr("fill-opacity", node => sequence.indexOf(node) >= 0 ? 1.0 : 0.3 ); label .style("visibility", null) .select(".sequence") //.style("visibility", "visible") .attr("fill", sequence => color(d.data.name)) .text(d.data.name); const percentage = ((100 * d.value) / root.value).toPrecision(3); label .style("visibility", null) .select(".percentage") .text(percentage + "%"); /*tooltip .text(d.data.name);*/ // Update the value of this view with the currently hovered sequence and percentage element.value = { sequence, percentage }; element.dispatchEvent(new CustomEvent("input")); }); return element; }