chart = {
const svg = d3
.create("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 900 1030")
.style("background-color", "#FBFAF5");
const gradientStartColor = customColorMap(0.0);
const gradientMidColor = customColorMap(0.2);
const gradientEndColor = customColorMap(1.0);
const gradient_light = svg
.append("linearGradient")
.attr("id", "gradLight")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "0%")
.attr("y2", "100%");
gradient_light
.append("stop")
.attr("offset", "0%")
.attr("stop-color", gradientStartColor);
gradient_light
.append("stop")
.attr("offset", "60%")
.attr("stop-color", gradientMidColor);
// グラデーションの終了色を追加します
gradient_light
.append("stop")
.attr("offset", "95%")
.attr("stop-color", gradientEndColor);
// 暗いグラデーションを定義します
const gradient_dark = svg
.append("linearGradient")
.attr("id", "gradDark")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "0%")
.attr("y2", "100%");
// グラデーションの開始色を追加します
gradient_dark
.append("stop")
.attr("offset", "0%")
.attr("stop-color", gradientStartColor);
// グラデーションの中間色を追加します
gradient_dark
.append("stop")
.attr("offset", "60%")
.attr("stop-color", gradientMidColor);
// グラデーションの終了色を追加します
gradient_dark
.append("stop")
.attr("offset", "95%")
.attr("stop-color", gradientEndColor);
// x軸をSVGに追加します
svg.append("g").call(xAxis);
// 新しいY軸を右側に追加するための設定
const yAxisRight = d3
.axisRight(y)
.ticks(5) // 目盛りの数を設定
.tickSize(width); // 目盛り線の長さをグラフ全体の幅に設定
// Y軸を右側に追加
svg
.append("g")
.attr("class", "y-axis-right") // クラスを追加(任意)
.call(yAxisRight)
.attr("transform", `translate(${width},0)`); // 右側に配置
// データの各シリーズに対して要素を追加し、位置を調整します
const group = svg
.append("g")
.selectAll("g")
.data(data.series)
.join("g")
.attr("transform", (d) => `translate(0,${y(d.country) + 1})`);
// 領域を描画します
group
.append("path")
.attr("fill", mode === "dark" ? "url(#gradDark)" : "url(#gradLight)")
.attr("fill-opacity", 0.6)
.attr("d", (d) => area(d.viewss));
// 線を描画します
group
.append("path")
.attr("fill", "none")
// .attr("stroke", mode === "dark" ? "#f2e8d2" : "#544208")
.attr("stroke", "black")
.attr("stroke-width", 1.5) // 線の太さを設定します
.attr("stroke-opacity", 0.3) // 線の透明度を設定します
.attr("d", (d) => line(d.viewss));
// y軸をSVGに追加します;
svg
.append("g")
.call(yAxis)
.selectAll("text")
.attr("text-anchor", "end")
.attr("transform", "translate(85, -15)")
.style("font-size", "22px")
.style("font-weight", "bold")
// .style("stroke", "rgb(250, 245, 240)") // ストロークの色を指定します
.style("stroke", "white") // ストロークの色を指定します
.style("opacity", 0.9) // ストロークの透明度を指定します
.style("stroke-width", "0.3px"); // ストロークの太さを指定します
group
.append("image")
// .attr("x", 200) // 画像のX座標
// .attr("y", (d, i) => i * 1 - 15) // 画像のY座標(各国の間隔を調整するためにiを使用)
.attr("transform", "translate(200, -27)")
.attr("width", 25) // 画像の幅
.attr("height", 25) // 画像の高さ
.attr("xlink:href", (d) => d.Circle_Image_URL);
// SVG要素を返します
return svg.node();
}