25:["$","title",null,{"children":"Study Auto Size Label | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 49:T3658,Visualization = { let chartWidth = width, // グラフの幅 chartHeight = height, // グラフの高さ fontSizeRange = [12, 64], // テキストのフォントサイズの範囲 colors = [ // グラフの色のリスト "#7496be", "#fda95d", "#c598b9", "#ffb6bd", "#7eb876", "#f8da73", "#ef7c7d", "#96cbc7" ]; let svgRef = DOM.svg(width, height); // SVG要素の参照 const svg = d3.select(svgRef); // チャートの背景色を描画 svg .append("rect") .attr("width", chartWidth) // グラフの幅 .attr("height", chartHeight) // グラフの高さ .attr("fill", "rgb(250, 245, 240)"); // 背景色を設定 // 描画領域のサイズを取得 const margin = { top: 20, right: 20, bottom: 50, left: 40 }; const innerWidth = chartWidth - margin.left - margin.right; const innerHeight = chartHeight - margin.top - margin.bottom; // X軸とY軸のスケールを設定 const x = d3.scaleLinear().range([0, innerWidth]); const y = d3.scaleLinear().range([innerHeight, 0]); // SVGコンテナをグループ化して描画領域を定義 const chart = svg.append("g").attr( "transform", `translate(${margin.left},${margin.top})` // 描画領域をマージン分だけ移動 ); const series = chart .selectAll(".area") .data(films) // データをシリーズにバインド .enter() .append("g") .attr("class", "area"); // シリーズの要素を作成 // エリアのパスを作成し、色と透明度を設定 series .append("path") .attr("class", "area") .attr("fill", (d, i) => colors[i]) // エリアの色 .attr("fill-opacity", 0.8); // 透明度を0.8に設定 series .append("path") .attr("class", "midline") .attr("id", (d, i) => uids[i].id); // ミッドラインのパスを作成し、IDを設定 series .append("text") .attr("class", "measurable") .attr("dy", "0.35em") .text((d) => d); // テキストを表示【ラベルテキスト】 series .append("text") .attr("class", "along-path") .attr("dy", "0.35em") .append("textPath") .attr("xlink:href", (d, i) => uids[i].href) .text((d) => d); // テキストをパスに沿って表示【ラベルテキスト】 yield svgRef; const line = d3.line().curve(d3.curveMonotoneX); // 曲線を生成する関数 function positionLabel({ points } = {}, j) { let area = d3.select(this), pathText = area.select(".along-path"); let { width, height } = area.select(".measurable").node().getBBox(); // テキストの幅と高さを取得【ラベルテキスト】 let distances = [], gaps = []; // 【ラベルテキスト】中点の距離と垂直ギャップのリストを作成 // 各ペアの中間点を補完して高い解像度を取得 points.forEach(function (point, i) { let distanceBefore = i ? distanceBetween(points[i - 1].mid, point.mid) : 0, gap = point.gap; if (i) { // シャープなターンの場合はリストから除外 if ( i < points.length - 1 && sharpAngle(points[i - 1].mid, point.mid, points[i + 1].mid) ) { gap = 0; } gaps.push(point.crossed ? 0 : (gaps[gaps.length - 1] + gap) / 2); distances.push(distanceBefore / 2); } gaps.push(gap); distances.push(distanceBefore / 2); }); // 【ラベルテキスト】フォントサイズと位置を計算 let { fontSize, offset, index } = getTextPathPosition( distances, gaps, width, height ); // ラベルテキストの配置位置を調整 offset = Math.min(offset + 10, 90); // オフセットを10%増やす // 【ラベルテキスト】フォントサイズが適合する場合、表示 if (fontSize) { pathText .style("display", "block") .style("font-size", fontSize + "px") .select("textPath") .attr("startOffset", offset + "%") .attr("textRotation", 45); // ラベルテキストを45度回転させる } else { pathText.style("display", "none"); } } function getTextPathPosition(distances, gaps, width, height) { let bestPos, bestSize, bestMargin; for (let i = 1; i < distances.length - 1; i++) { let [min, max] = fontSizeRange, margin; // バイナリサーチで中心点 i で最大の使用可能なフォントサイズを検索 while (min <= max) { let size = Math.floor((min + max) / 2); // テキストが収まる場合 if ((margin = testSize(size, i) > 0)) { // 以前の勝者よりも大きい場合、または同じサイズでより大きなマージンがある場合、新しい勝者 if ( !bestSize || size > bestSize || (size === bestSize && margin >= bestMargin) ) { bestSize = size; bestPos = i; bestMargin = margin; } // より大きなフォントサイズを試す min = size + 1; } else { // より小さなフォントサイズを試す max = size - 1; } } } // 推定される startOffset とフォントサイズを返す return bestSize ? { offset: (100 * d3.sum(distances.slice(0, bestPos + 1))) / d3.sum(distances), index: bestPos, fontSize: bestSize } : { // フォントサイズが0の場合、最小限のサイズを設定 fontSize: 8 // 例として4pxを設定 }; // 特定のフォントサイズを中心インデックスでテストする function testSize(s, center) { let halfWidth = (width * s) / 32, // このサイズのテキストの幅の半分を推定 h = (height * s) / 16, // このサイズのテキストの高さを推定 paddedHeight = h + Math.max(6, h / 6); // 必要な垂直クリアランス - 少なくとも2px、大きい場合はそれ以上 let minHeight = gaps[center], leftPos = center, left = 0, rightPos = center, right = 0; // 中心から左に探索し、最小の垂直クリアランスを見つける // 最初の2つのポイントの前に停止して、末尾に少し余白を残す while (leftPos >= 2 && left < halfWidth) { left += distances[leftPos]; leftPos--; minHeight = Math.min(gaps[leftPos], minHeight); // 十分なクリアランスがない場合、終了 if (minHeight < paddedHeight) { break; } } // 中心から右に探索し、最小の垂直クリアランスを見つける // 最後の2つのポイントの前に停止して、末尾に少し余白を残す while ( minHeight >= paddedHeight && rightPos < distances.length - 2 && right < halfWidth ) { right += distances[rightPos]; rightPos++; minHeight = Math.min(gaps[rightPos], minHeight); // 十分なクリアランスがない場合、終了 if (minHeight < paddedHeight) { break; } } // すべての側面に余裕がある場合、残りの垂直マージンを返す if ( left >= halfWidth && right >= halfWidth && minHeight >= paddedHeight ) { return minHeight - h; } // フィットしない場合 return 0; } } function getGap(point, before, after, polygon) { if (before && after) { let bisected = bisect(before.mid, point.mid, after.mid); let points = polygonRayCast(polygon, point.mid, bisected); if (points && points.every((p) => p)) { return distanceBetween(...points); } return 0; } return point.bottom[1] - point.top[1]; } // データをバンプドエリアチャートのトップ/ボトムに変換 function bumpArea(data) { let sorted = data.map(function (d) { return d3.entries(d).sort((a, b) => a.value - b.value); }); return d3.keys(data[0]).map(function (key) { return sorted.map(function (set) { let index = set.findIndex((d) => d.key === key), sumBefore = d3.sum(set.slice(0, index).map((d) => d.value)); return [ sumBefore, // ボトム sumBefore + set[index].value, // トップ sumBefore + set[index].value / 2 // ミッド ]; }); }); } function distanceBetween(a, b) { let dx = a[0] - b[0], dy = a[1] - b[1]; return Math.sqrt(dx * dx + dy * dy); } // 【【ラベルテキスト】過度にシャープな角度を回避 function sharpAngle(a, b, c) { let ab = Math.sqrt(Math.pow(b[0] - a[0], 2) + Math.pow(b[1] - a[1], 2)), bc = Math.sqrt(Math.pow(b[0] - c[0], 2) + Math.pow(b[1] - c[1], 2)), ac = Math.sqrt(Math.pow(c[0] - a[0], 2) + Math.pow(c[1] - a[1], 2)), angle = (Math.abs(Math.acos((bc * bc + ab * ab - ac * ac) / (2 * bc * ab))) * 180) / Math.PI; return angle < 130 || angle > 230; } function bisect(a, b, c) { var at = getAngle(a, b), bt = getAngle(b, c), adjusted = bt - at; return (adjusted + Math.PI / 2) % (2 * Math.PI); } function getAngle(a, b) { let t = Math.atan2(b[1] - a[1], b[0] - a[0]); return t > 0 ? t : 2 * Math.PI + t; } // データを生成 let data = [ { "The Fast and the Furious": 2, "2 Fast 2 Furious": 5, "The Fast and the Furious: Tokyo Drift": 8, "Fast & Furious": 2, "Fast Five": 10, "Fast & Furious 6": 8, "Furious 7": 6, "The Fate of the Furious": 3 }, { "The Fast and the Furious": 18, "2 Fast 2 Furious": 10, "The Fast and the Furious: Tokyo Drift": 25, "Fast & Furious": 8, "Fast Five": 12, "Fast & Furious 6": 30, "Furious 7": 15, "The Fate of the Furious": 20 }, { "The Fast and the Furious": 5, "2 Fast 2 Furious": 3, "The Fast and the Furious: Tokyo Drift": 15, "Fast & Furious": 20, "Fast Five": 18, "Fast & Furious 6": 10, "Furious 7": 12, "The Fate of the Furious": 8 }, { "The Fast and the Furious": 12, "2 Fast 2 Furious": 20, "The Fast and the Furious: Tokyo Drift": 18, "Fast & Furious": 30, "Fast Five": 25, "Fast & Furious 6": 8, "Furious 7": 10, "The Fate of the Furious": 15 }, { "The Fast and the Furious": 30, "2 Fast 2 Furious": 18, "The Fast and the Furious: Tokyo Drift": 10, "Fast & Furious": 15, "Fast Five": 8, "Fast & Furious 6": 12, "Furious 7": 20, "The Fate of the Furious": 25 }, { "The Fast and the Furious": 15, "2 Fast 2 Furious": 25, "The Fast and the Furious: Tokyo Drift": 20, "Fast & Furious": 10, "Fast Five": 30, "Fast & Furious 6": 18, "Furious 7": 8, "The Fate of the Furious": 12 }, { "The Fast and the Furious": 10, "2 Fast 2 Furious": 8, "The Fast and the Furious: Tokyo Drift": 30, "Fast & Furious": 25, "Fast Five": 15, "Fast & Furious 6": 20, "Furious 7": 18, "The Fate of the Furious": 12 }, { "The Fast and the Furious": 20, "2 Fast 2 Furious": 12, "The Fast and the Furious: Tokyo Drift": 18, "Fast & Furious": 10, "Fast Five": 25, "Fast & Furious 6": 30, "Furious 7": 15, "The Fate of the Furious": 8 } ]; let stacked = bumpArea(data); x.domain([0, data.length - 1]); y.domain([ d3.min(stacked.map((d) => d3.min(d.map((p) => p[0])))), d3.max(stacked.map((d) => d3.max(d.map((p) => p[1])))) ]); let scaled = stacked.map((series, i) => { let points = series.map((p, j) => { let px = x(j), py1 = y(p[0]), py2 = y(p[1]), crossed; if (j) { // 他のエリアが重なる場合、その上に他のエリアが重なるポイントを除外 stacked.slice(i + 1).some(function (otherSeries, k) { if ( otherSeries[j - 1][2] < series[j - 1][2] !== otherSeries[j][2] < p[2] ) { return (crossed = true); } }); } return { bottom: [px, py1], top: [px, py2], mid: [px, (py1 + py2) / 2], crossed }; }); let topLine = points.map((p) => p.top), bottomLine = points.map((p) => p.bottom).reverse(), midLine = points.map((p) => p.mid), polygon = topLine.concat(bottomLine); // 回転テキストの実際のギャップを取得 points.forEach(function (point, i) { point.gap = getGap(point, points[i - 1], points[i + 1], polygon); }); return { topLine, bottomLine, midLine, points, polygon }; }); // 塗りつぶされたエリアを描画 series .data(scaled) .select(".area") .attr("d", (area) => [line(area.topLine), line(area.bottomLine).replace("M", "L"), "Z"].join( "" ) ); // 不可視のミッドラインを更新 series.select(".midline").attr("d", (area) => line(area.midLine)); // ミッドラインに沿ったラベルを配置 series.each(positionLabel); // X軸を追加 chart .append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("y", 0) .attr("x", 9) .attr("dy", ".35em") .attr("transform", "rotate(45)") .style("text-anchor", "start"); // X軸のラベルの回転 yield svgRef; } 4a:T37d3,Visualization2 = { let chartWidth = width, // グラフの幅 chartHeight = height, // グラフの高さ fontSizeRange = [12, 64], // テキストのフォントサイズの範囲 colors = [ // グラフの色のリスト "#7496be", "#fda95d", "#c598b9", "#ffb6bd", "#7eb876", "#f8da73", "#ef7c7d", "#96cbc7" ]; let svgRef = DOM.svg(width, height); // SVG要素の参照 const svg = d3.select(svgRef); // チャートの背景色を描画 svg .append("rect") .attr("width", chartWidth) // グラフの幅 .attr("height", chartHeight) // グラフの高さ .attr("fill", "rgb(250, 245, 240)"); // 背景色を設定 // 描画領域のサイズを取得 const margin = { top: 20, right: 20, bottom: 50, left: 40 }; const innerWidth = chartWidth - margin.left - margin.right; const innerHeight = chartHeight - margin.top - margin.bottom; // X軸とY軸のスケールを設定 const x = d3.scaleLinear().range([0, innerWidth]); const y = d3.scaleLinear().range([innerHeight, 0]); // SVGコンテナをグループ化して描画領域を定義 const chart = svg.append("g").attr( "transform", `translate(${margin.left},${margin.top})` // 描画領域をマージン分だけ移動 ); const series = chart .selectAll(".area") .data(films) // データをシリーズにバインド .enter() .append("g") .attr("class", "area"); // シリーズの要素を作成 // エリアのパスを作成し、色と透明度を設定 series .append("path") .attr("class", "area") .attr("fill", (d, i) => colors[i]) // エリアの色 .attr("fill-opacity", 0.8); // 透明度を0.8に設定 series .append("path") .attr("class", "midline") .attr("id", (d, i) => uids[i].id); // ミッドラインのパスを作成し、IDを設定 series .append("text") .attr("class", "measurable") .attr("dy", "0.35em") .text((d) => d); // テキストを表示【ラベルテキスト】 series .append("text") .attr("class", "along-path") .attr("dy", "0.35em") .append("textPath") .attr("xlink:href", (d, i) => uids[i].href) .text((d) => d); // テキストをパスに沿って表示【ラベルテキスト】 // series.each(function (data, index) { // // data を渡す // positionLabel(data, index); // data を使用 // }); yield svgRef; const line = d3.line().curve(d3.curveMonotoneX); // 曲線を生成する関数 function positionLabel(data, { points } = {}, j, height, textRotation) { let area = d3.select(this), pathText = area.select(".along-path"); // pathText 要素が DOM に追加された後に処理を実行 pathText.on("DOMNodeInserted", function () { let { width, height } = area .select(".measurable") .node() .getBBox(); // テキストの幅と高さを取得【ラベルテキスト】 let distances = [], gaps = []; // Convert list of midpoints into a list of distances between them and their vertical gaps, // also interpolate the halfway point between each pair to get higher resolution points.forEach(function (point, i) { let distanceBefore = i ? distanceBetween(points[i - 1].mid, point.mid) : 0, gap = point.gap; if (i) { // Take this point off the table if it's a sharp turn if ( i < points.length - 1 && sharpAngle(points[i - 1].mid, point.mid, points[i + 1].mid) ) { gap = 0; } gaps.push(point.crossed ? 0 : (gaps[gaps.length - 1] + gap) / 2); distances.push(distanceBefore / 2); } gaps.push(gap); distances.push(distanceBefore / 2); }); let { fontSize, offset, index } = getTextPathPosition( distances, gaps, width, height ); // It fits! if (fontSize) { pathText .style("display", "block") .style("font-size", fontSize + "px") .style("font-weight", "bold") .style("stroke", "white") .style("stroke-width", "1px") .select("textPath") .attr("startOffset", offset + "%") .attr("textRotation", textRotation); // textRotation を使用する // ラベルテキストのX座標を調整 pathText.attr("x", pathText.node().getStartOffset() * width / 100); } else { pathText.style("display", "none"); } }); function getTextPathPosition(distances, gaps, width, height) { let bestPos, bestSize, bestMargin; for (let i = 1; i < distances.length - 1; i++) { let [min, max] = fontSizeRange, margin; // バイナリサーチで中心点 i で最大の使用可能なフォントサイズを検索 while (min <= max) { let size = Math.floor((min + max) / 2); // テキストが収まる場合 if ((margin = testSize(size, i) > 0)) { // 以前の勝者よりも大きい場合、または同じサイズでより大きなマージンがある場合、新しい勝者 if ( !bestSize || size > bestSize || (size === bestSize && margin >= bestMargin) ) { bestSize = size; bestPos = i; bestMargin = margin; } // より大きなフォントサイズを試す min = size + 1; } else { // より小さなフォントサイズを試す max = size - 1; } } } // 推定される startOffset とフォントサイズを返す return bestSize ? { offset: (100 * d3.sum(distances.slice(0, bestPos + 1))) / d3.sum(distances), index: bestPos, fontSize: bestSize } : { // フォントサイズが0の場合、最小限のサイズを設定 fontSize: 8 // 例として4pxを設定 }; // 特定のフォントサイズを中心インデックスでテストする function testSize(s, center) { let halfWidth = (width * s) / 32, // このサイズのテキストの幅の半分を推定 h = (height * s) / 16, // このサイズのテキストの高さを推定 paddedHeight = h + Math.max(6, h / 6); // 必要な垂直クリアランス - 少なくとも2px、大きい場合はそれ以上 let minHeight = gaps[center], leftPos = center, left = 0, rightPos = center, right = 0; // 中心から左に探索し、最小の垂直クリアランスを見つける // 最初の2つのポイントの前に停止して、末尾に少し余白を残す while (leftPos >= 2 && left < halfWidth) { left += distances[leftPos]; leftPos--; minHeight = Math.min(gaps[leftPos], minHeight); // 十分なクリアランスがない場合、終了 if (minHeight < paddedHeight) { break; } } // 中心から右に探索し、最小の垂直クリアランスを見つける // 最後の2つのポイントの前に停止して、末尾に少し余白を残す while ( minHeight >= paddedHeight && rightPos < distances.length - 2 && right < halfWidth ) { right += distances[rightPos]; rightPos++; minHeight = Math.min(gaps[rightPos], minHeight); // 十分なクリアランスがない場合、終了 if (minHeight < paddedHeight) { break; } } // すべての側面に余裕がある場合、残りの垂直マージンを返す if ( left >= halfWidth && right >= halfWidth && minHeight >= paddedHeight ) { return minHeight - h; } // フィットしない場合 return 0; } } function getGap(point, before, after, polygon) { if (before && after) { let bisected = bisect(before.mid, point.mid, after.mid); let points = polygonRayCast(polygon, point.mid, bisected); if (points && points.every((p) => p)) { return distanceBetween(...points); } return 0; } return point.bottom[1] - point.top[1]; } // データをバンプドエリアチャートのトップ/ボトムに変換 function bumpArea(data) { let sorted = data.map(function (d) { return d3.entries(d).sort((a, b) => a.value - b.value); }); return d3.keys(data[0]).map(function (key) { return sorted.map(function (set) { let index = set.findIndex((d) => d.key === key), sumBefore = d3.sum(set.slice(0, index).map((d) => d.value)); return [ sumBefore, // ボトム sumBefore + set[index].value, // トップ sumBefore + set[index].value / 2 // ミッド ]; }); }); } function distanceBetween(a, b) { let dx = a[0] - b[0], dy = a[1] - b[1]; return Math.sqrt(dx * dx + dy * dy); } // 【【ラベルテキスト】過度にシャープな角度を回避 function sharpAngle(a, b, c) { let ab = Math.sqrt(Math.pow(b[0] - a[0], 2) + Math.pow(b[1] - a[1], 2)), bc = Math.sqrt(Math.pow(b[0] - c[0], 2) + Math.pow(b[1] - c[1], 2)), ac = Math.sqrt(Math.pow(c[0] - a[0], 2) + Math.pow(c[1] - a[1], 2)), angle = (Math.abs(Math.acos((bc * bc + ab * ab - ac * ac) / (2 * bc * ab))) * 180) / Math.PI; return angle < 130 || angle > 230; } function bisect(a, b, c) { var at = getAngle(a, b), bt = getAngle(b, c), adjusted = bt - at; return (adjusted + Math.PI / 2) % (2 * Math.PI); } function getAngle(a, b) { let t = Math.atan2(b[1] - a[1], b[0] - a[0]); return t > 0 ? t : 2 * Math.PI + t; } // データを生成 let data = [ { "The Fast and the Furious": 2, "2 Fast 2 Furious": 5, "The Fast and the Furious: Tokyo Drift": 8, "Fast & Furious": 2, "Fast Five": 10, "Fast & Furious 6": 8, "Furious 7": 6, "The Fate of the Furious": 3 }, { "The Fast and the Furious": 18, "2 Fast 2 Furious": 10, "The Fast and the Furious: Tokyo Drift": 25, "Fast & Furious": 8, "Fast Five": 12, "Fast & Furious 6": 30, "Furious 7": 15, "The Fate of the Furious": 20 }, { "The Fast and the Furious": 5, "2 Fast 2 Furious": 3, "The Fast and the Furious: Tokyo Drift": 15, "Fast & Furious": 20, "Fast Five": 18, "Fast & Furious 6": 10, "Furious 7": 12, "The Fate of the Furious": 8 }, { "The Fast and the Furious": 12, "2 Fast 2 Furious": 20, "The Fast and the Furious: Tokyo Drift": 18, "Fast & Furious": 30, "Fast Five": 25, "Fast & Furious 6": 8, "Furious 7": 10, "The Fate of the Furious": 15 }, { "The Fast and the Furious": 30, "2 Fast 2 Furious": 18, "The Fast and the Furious: Tokyo Drift": 10, "Fast & Furious": 15, "Fast Five": 8, "Fast & Furious 6": 12, "Furious 7": 20, "The Fate of the Furious": 25 }, { "The Fast and the Furious": 15, "2 Fast 2 Furious": 25, "The Fast and the Furious: Tokyo Drift": 20, "Fast & Furious": 10, "Fast Five": 30, "Fast & Furious 6": 18, "Furious 7": 8, "The Fate of the Furious": 12 }, { "The Fast and the Furious": 10, "2 Fast 2 Furious": 8, "The Fast and the Furious: Tokyo Drift": 30, "Fast & Furious": 25, "Fast Five": 15, "Fast & Furious 6": 20, "Furious 7": 18, "The Fate of the Furious": 12 }, { "The Fast and the Furious": 20, "2 Fast 2 Furious": 12, "The Fast and the Furious: Tokyo Drift": 18, "Fast & Furious": 10, "Fast Five": 25, "Fast & Furious 6": 30, "Furious 7": 15, "The Fate of the Furious": 8 } ]; let stacked = bumpArea(data); x.domain([0, data.length - 1]); y.domain([ d3.min(stacked.map((d) => d3.min(d.map((p) => p[0])))), d3.max(stacked.map((d) => d3.max(d.map((p) => p[1])))) ]); let scaled = stacked.map((series, i) => { let points = series.map((p, j) => { let px = x(j), py1 = y(p[0]), py2 = y(p[1]), crossed; if (j) { // 他のエリアが重なる場合、その上に他のエリアが重なるポイントを除外 stacked.slice(i + 1).some(function (otherSeries, k) { if ( otherSeries[j - 1][2] < series[j - 1][2] !== otherSeries[j][2] < p[2] ) { return (crossed = true); } }); } return { bottom: [px, py1], top: [px, py2], mid: [px, (py1 + py2) / 2], crossed }; }); let topLine = points.map((p) => p.top), bottomLine = points.map((p) => p.bottom).reverse(), midLine = points.map((p) => p.mid), polygon = topLine.concat(bottomLine); // 回転テキストの実際のギャップを取得 points.forEach(function (point, i) { point.gap = getGap(point, points[i - 1], points[i + 1], polygon); }); return { topLine, bottomLine, midLine, points, polygon }; }); // 塗りつぶされたエリアを描画 series .data(scaled) .select(".area") .attr("d", (area) => [line(area.topLine), line(area.bottomLine).replace("M", "L"), "Z"].join( "" ) ); // 不可視のミッドラインを更新 series.select(".midline").attr("d", (area) => line(area.midLine)); // ミッドラインに沿ったラベルを配置 series.each(function (d, i) { let area = d3.select(this); let { width, height } = area.select(".measurable").node().getBBox(); // width と height を取得 positionLabel(data, d, i, width, height, 45); // width と height を渡す }); // X軸を追加 chart .append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("y", 0) .attr("x", 9) .attr("dy", ".35em") .attr("transform", "rotate(45)") .style("text-anchor", "start"); // X軸のラベルの回転 yield svgRef; }4b:T465,function polygonRayCast(poly, origin, alpha = 0) { const eps = 1e-9; origin = [ origin[0] + eps * Math.cos(alpha), origin[1] + eps * Math.sin(alpha) ]; const [x0, y0] = origin; const shiftedOrigin = [x0 + Math.cos(alpha), y0 + Math.sin(alpha)]; let idx = 0; if (Math.abs(shiftedOrigin[0] - x0) < eps) idx = 1; let i = -1; const n = poly.length; let b = poly[n - 1]; let minSqDistLeft = Number.MAX_VALUE; let minSqDistRight = Number.MAX_VALUE; let closestPointLeft = null; let closestPointRight = null; while (++i < n) { const a = b; b = poly[i]; const p = lineIntersection(origin, shiftedOrigin, a, b); if (p && segmentBoxContains(a, b, p)) { const sqDist = pointDistanceSquared(origin, p); if (p[idx] < origin[idx]) { if (sqDist < minSqDistLeft) { minSqDistLeft = sqDist; closestPointLeft = p; } } else if (p[idx] > origin[idx]) { if (sqDist < minSqDistRight) { minSqDistRight = sqDist; closestPointRight = p; } } } } return [closestPointLeft, closestPointRight]; }4c:[] 29:{"id":"9ecb6a4b2c6f3140","slug":null,"title":"Study Auto Size Label","thumbnail":"a63b3954304b0f783b030dd0c8c990bcb22ffc2fceb028f0ee8d44b3274885c0","access_level":"public","create_time":"$D2023-09-10T07:31:03.780Z","update_time":"$D2024-09-02T18:44:17.542Z","view_time":null,"first_public_time":"$D2023-09-10T07:31:03.780Z","has_unpublished_edits":null,"fork":{"id":"5b74007815243d9e","slug":"auto-label-size","title":"Auto Size Label","owner":{"id":"c4502285a4e37a76","login":"stroked","name":"Ajay"}},"stars":0,"starred":false,"owner":{"type":"team","id":"59dc038720f2d6ef","login":"tsurezure-lab-ws","name":"tsurezure lab. こちら徒然研究室（仮称）","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":"starter_2024","bio":"Data x Ethnography x Visualization / Python\nデータとプログラミングと可視化で文化・社会・人間の不思議を研究しています。","followed_by_you":false,"follows_you":false},"version":497,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5dc444280c822d70","login":"tsurezure-lab","name":"tsurezure lab. ","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":null,"bio":"Data x Ethnography x Visualization / Python\nデータとプログラミングと可視化で文化・社会・人間の不思議を研究しています。","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5dc444280c822d70","login":"tsurezure-lab","name":"tsurezure lab. ","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":null,"role":"editor"},{"type":"team","id":"59dc038720f2d6ef","login":"tsurezure-lab-ws","name":"tsurezure lab. こちら徒然研究室（仮称）","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Study Auto Size Label","cells":[{"id":0,"value":"md`# Study Auto Size Label`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`[https://bl.ocks.org/veltman/3195a6c9f7426ee699b18ee4c8e99181](https://bl.ocks.org/veltman/3195a6c9f7426ee699b18ee4c8e99181)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`\n---\n## Visualization\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"md`---\n### SELECTION`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`---\n### LAYOUT`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`---\n### SCALES`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`---\n### Config`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"height = 675","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"margin = ({ top: 50, right: 50, bottom: 50, left: 50 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"uids= films.map(x=>DOM.uid(x))\n// 例として、uids は films のインデックスに対応した ID を持つように設定\n// uids = films.map((film, i) => ({ id: `film-${i}`, href: `#film-${i}` }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`---\n## DATA`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"films = [\n \"The Fast and the Furious\",\n \"2 Fast 2 Furious\",\n \"The Fast and the Furious: Tokyo Drift\",\n \"Fast & Furious\",\n \"Fast Five\",\n \"Fast & Furious 6\",\n \"Furious 7\",\n \"The Fate of the Furious\"\n]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`---\n## ANX`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"// d3plus = require(\"https://cdn.jsdelivr.net/npm/d3plus-shape@1\").catch(\n// () => window[\"ownKeys\"]\n// )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md`Original Uses d3plus.polygonRayCast but the import doesn't seem to work anymore\n\n\nCopied relevant functions from:\nhttps://github.com/d3plus/d3plus-shape/blob/master/src/geom/polygonRayCast.js\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"function pointDistanceSquared(p1, p2) {\n const dx = p2[0] - p1[0],\n dy = p2[1] - p1[1];\n\n return dx * dx + dy * dy;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"function segmentBoxContains(s1, s2, p) {\n const eps = 1e-9,\n [px, py] = p;\n\n return !(\n px < Math.min(s1[0], s2[0]) - eps ||\n px > Math.max(s1[0], s2[0]) + eps ||\n py < Math.min(s1[1], s2[1]) - eps ||\n py > Math.max(s1[1], s2[1]) + eps\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"function lineIntersection(p1, q1, p2, q2) {\n // allow for some margins due to numerical errors\n const eps = 1e-9;\n\n // find the intersection point between the two infinite lines\n const dx1 = p1[0] - q1[0],\n dx2 = p2[0] - q2[0],\n dy1 = p1[1] - q1[1],\n dy2 = p2[1] - q2[1];\n\n const denom = dx1 * dy2 - dy1 * dx2;\n\n if (Math.abs(denom) < eps) return null;\n\n const cross1 = p1[0] * q1[1] - p1[1] * q1[0],\n cross2 = p2[0] * q2[1] - p2[1] * q2[0];\n\n const px = (cross1 * dx2 - cross2 * dx1) / denom,\n py = (cross1 * dy2 - cross2 * dy1) / denom;\n\n return [px, py];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null