หน้านี้ได้รับการแปลโดย Cloud Translation API

แผนภาพ Sankey

ภาพรวม
ตัวอย่างง่ายๆ
คีย์ต่างๆ หลายระดับ
การควบคุมสี
การปรับแต่งแบบอักษร
การปรับโหนด
กำลังโหลด
รูปแบบข้อมูล
ตัวเลือกการกําหนดค่า
เมธอด
เหตุการณ์
นโยบายข้อมูล

ภาพรวม

ไดอะแกรม Sankey เป็นการแสดงภาพที่ใช้เพื่อแสดงโฟลวจากชุดค่าหนึ่งไปยังอีกชุดหนึ่ง สิ่งที่เชื่อมโยงกันเรียกว่าโหนด และการเชื่อมต่อเรียกว่าลิงก์ ฟังก์ชันเหล่านี้เหมาะสําหรับเวลาที่คุณต้องการแสดงการแมประหว่างกันในโดเมน 2 โดเมน (เช่น มหาวิทยาลัยและมหาวิทยาลัย) หรือเส้นทางหลายเส้นทางผ่านชุดขั้นตอน (เช่น Google Analytics จะใช้คีย์ที่แสดงการไหลเวียนของหน้าเว็บไปยังหน้าเว็บอื่นๆ ในเว็บไซต์)

สําหรับผู้ที่สงสัย กลุ่มเหล่านี้ชื่อว่ากัปตันซานคีย์ที่สร้างแผนภาพประสิทธิภาพของเครื่องจักรไอน้ํา ซึ่งใช้ลูกศรที่มีความกว้างเป็นสัดส่วนการสูญเสียความร้อน

หมายเหตุ: แผนภูมิ Sansan อาจกําลังได้รับการแก้ไขอย่างมากใน Google Charts รุ่นต่อๆ ไป

ไดอะแกรม Sankey จะแสดงผลในเบราว์เซอร์โดยใช้ SVG หรือ VML ที่เหมาะสมสําหรับเบราว์เซอร์ของผู้ใช้ โค้ดการออกแบบ Sankey ของ Google ได้มาจากโค้ดรูปแบบ Sankey ของ D3

หมายเหตุ: แผนภูมิ Google Sansan ไม่พร้อมใช้งานใน Microsoft Internet Explorer 8 และเวอร์ชันก่อนหน้า

ตัวอย่างง่ายๆ

สมมติว่าคุณมีหมวดหมู่ 2 หมวดหมู่ ได้แก่ A และ B ซึ่งเชื่อมต่อกับหมวดหมู่อื่นๆ 3 หมวดหมู่ ได้แก่ X, Y และ Z การเชื่อมต่อบางอย่างมีความเสียหายมาก กว่าการเชื่อมต่ออื่นๆ เช่น ข. มีการเชื่อมต่อที่บางกับ X และมีการเชื่อมต่อ Y ที่หนามาก

ลองวางเมาส์เหนือลิงก์ใดลิงก์หนึ่งเพื่อไฮไลต์การเชื่อมต่อ

ในการสร้างแผนภูมิ Sankey ให้เพิ่มชุดแถวที่แสดงข้อมูลแต่ละรายการเกี่ยวกับการเชื่อมต่อเดียว ได้แก่ จาก ถึง และน้ําหนัก จากนั้นใช้เมธอด google.visualization.Sankey() เพื่อเริ่มแผนภูมิ จากนั้นใช้วิธีการ draw() ในการแสดงผล ดังนี้

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['sankey']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'From');
        data.addColumn('string', 'To');
        data.addColumn('number', 'Weight');
        data.addRows([
          [ 'A', 'X', 5 ],
          [ 'A', 'Y', 7 ],
          [ 'A', 'Z', 6 ],
          [ 'B', 'X', 2 ],
          [ 'B', 'Y', 9 ],
          [ 'B', 'Z', 4 ]
        ]);

        // Sets chart options.
        var options = {
          width: 600,
        };

        // Instantiates and draws our chart, passing in some options.
        var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="sankey_basic" style="width: 900px; height: 300px;"></div>
  </body>
</html>

หมายเหตุ: หลีกเลี่ยงวงจรในข้อมูลของคุณ หาก A ลิงก์กับตัวเอง หรือลิงก์ไปยัง B ซึ่งลิงก์ไปยัง C ที่ลิงก์ไปยัง A แผนภูมิจะไม่แสดง

คีย์ต่างๆ หลายระดับ

คุณสามารถสร้างแผนภูมิ Sankey ที่มีการเชื่อมต่อหลายระดับดังนี้

แผนภูมิ Sankey จะเพิ่มระดับตามความจําเป็นโดยการจัดวางโดยอัตโนมัติ นี่คือโค้ดที่สมบูรณ์สําหรับแผนภูมิด้านบน:

<html>
<body>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>

<script type="text/javascript">
  google.charts.load("current", {packages:["sankey"]});
  google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
       [ 'Brazil', 'Portugal', 5 ],
       [ 'Brazil', 'France', 1 ],
       [ 'Brazil', 'Spain', 1 ],
       [ 'Brazil', 'England', 1 ],
       [ 'Canada', 'Portugal', 1 ],
       [ 'Canada', 'France', 5 ],
       [ 'Canada', 'England', 1 ],
       [ 'Mexico', 'Portugal', 1 ],
       [ 'Mexico', 'France', 1 ],
       [ 'Mexico', 'Spain', 5 ],
       [ 'Mexico', 'England', 1 ],
       [ 'USA', 'Portugal', 1 ],
       [ 'USA', 'France', 1 ],
       [ 'USA', 'Spain', 1 ],
       [ 'USA', 'England', 5 ],
       [ 'Portugal', 'Angola', 2 ],
       [ 'Portugal', 'Senegal', 1 ],
       [ 'Portugal', 'Morocco', 1 ],
       [ 'Portugal', 'South Africa', 3 ],
       [ 'France', 'Angola', 1 ],
       [ 'France', 'Senegal', 3 ],
       [ 'France', 'Mali', 3 ],
       [ 'France', 'Morocco', 3 ],
       [ 'France', 'South Africa', 1 ],
       [ 'Spain', 'Senegal', 1 ],
       [ 'Spain', 'Morocco', 3 ],
       [ 'Spain', 'South Africa', 1 ],
       [ 'England', 'Angola', 1 ],
       [ 'England', 'Senegal', 1 ],
       [ 'England', 'Morocco', 2 ],
       [ 'England', 'South Africa', 7 ],
       [ 'South Africa', 'China', 5 ],
       [ 'South Africa', 'India', 1 ],
       [ 'South Africa', 'Japan', 3 ],
       [ 'Angola', 'China', 5 ],
       [ 'Angola', 'India', 1 ],
       [ 'Angola', 'Japan', 3 ],
       [ 'Senegal', 'China', 5 ],
       [ 'Senegal', 'India', 1 ],
       [ 'Senegal', 'Japan', 3 ],
       [ 'Mali', 'China', 5 ],
       [ 'Mali', 'India', 1 ],
       [ 'Mali', 'Japan', 3 ],
       [ 'Morocco', 'China', 5 ],
       [ 'Morocco', 'India', 1 ],
       [ 'Morocco', 'Japan', 3 ]
    ]);

    // Set chart options
    var options = {
      width: 600,
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
    chart.draw(data, options);
   }
</script>
</body>
</html>

การควบคุมสี

แผนภูมิคีย์มีความสามารถในการตั้งค่าสีที่กําหนดเองสําหรับโหนดและลิงก์ ทั้งโหนดและลิงก์สามารถได้รับจานสีที่กําหนดเองโดยใช้ตัวเลือก colors (sankey.node.colors และ sankey.link.colors ตามลําดับ) นอกจากนี้ ยังกําหนดโหมดสีต่างๆ โดยใช้ตัวเลือก colorMode ได้ด้วย

หากไม่ได้กําหนดค่าสีเอง ระบบจะกําหนดค่าสีเหล่านั้นเป็น ชุดสีมาตรฐาน

    var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
                  '#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];

    var options = {
      height: 400,
      sankey: {
        node: {
          colors: colors
        },
        link: {
          colorMode: 'gradient',
          colors: colors
        }
      }
    };

คุณควบคุมสีของลิงก์ โหนด และป้ายกํากับได้ด้วยตัวเลือกการกําหนดค่า เราเลือก 3 รายการที่มีโทนสีเดียวกันแต่มีความสว่างต่างกัน ดังนี้

ตัวเลือกเหล่านั้นจะมีลักษณะดังนี้:

    var options = {
      width: 600,
      sankey: {
        link: { color: { fill: '#d799ae' } },
        node: { colors: [ '#a61d4c' ],
                label: { color: '#871b47' } },
      }
    };

นอกจากนี้ คุณยังควบคุมความโปร่งใสของลิงก์ได้ด้วยตัวเลือก sankey.link.color.fillOpacity

    var options = {
      width: 600,
      sankey: {
        link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
        node: { colors: [ '#a61d4c' ],
                label: { color: '#871b47' } },
      }
    };

หากต้องการสร้างเส้นขอบรอบลิงก์ ให้ใช้ตัวเลือก sankey.link.color.stroke และ sankey.link.color.strokeWidth

สีเส้นโครงร่างสามารถระบุในรูปแบบ RGB หรือชื่อภาษาอังกฤษ

    var options = {
      width: 750,
      height: 400,
      sankey: {
        node: { colors: [ '#a61d4c' ] },
        link: { color: { stroke: 'black', strokeWidth: 1 } },
      }
    };

การปรับแต่งป้ายกํากับ

คุณสามารถปรับแต่งข้อความบนแผนภูมิ Sansan โดยใช้ sankey.node.label.fontName และเพื่อนๆ ดังนี้

ตัวเลือกรูปแบบของแผนภูมิด้านบนมีดังนี้

    var options = {
      width: 600,
      sankey: {
        node: { label: { fontName: 'Times-Roman',
                         fontSize: 14,
                         color: '#871b47',
                         bold: true,
                         italic: true } } },
    };

คุณสามารถปรับตําแหน่งของป้ายกํากับที่เกี่ยวข้องกับโหนดได้โดยใช้ตัวเลือก sankey.node.labelPadding ดังนี้

ในแผนภูมิด้านบน เราได้เพิ่มระยะห่างจากขอบ 30 พิกเซลระหว่างป้ายกํากับและโหนด

    var options = {
      width: 600,
      sankey: { node: { labelPadding: 30 } },
    };

การปรับโหนด

คุณสามารถควบคุมความกว้างของโหนดได้ด้วย sankey.node.width:

ด้านบน เราตั้งค่าความกว้างของโหนดเป็น 2

    var options = {
      width: 600,
      sankey: { node: { width: 2 } },
    };

คุณสามารถปรับระยะห่างระหว่างโหนดได้ด้วย sankey.node.nodePadding:

เราตั้งค่า sankey.node.nodePadding เป็น 80 ในแผนภูมิด้านบน

    var options = {
      width: 900,
      sankey: { node: { nodePadding: 80 } },
    };

กําลังโหลด

ชื่อแพ็กเกจ google.charts.load คือ "sankey"

  google.charts.load("current" {packages: ["sankey"]});

ชื่อคลาสของการแสดงภาพคือ google.visualization.Sankey:

  var visualization = new google.visualization.Sankey(container);

รูปแบบข้อมูล

แถว: แต่ละแถวในตารางแสดงการเชื่อมต่อระหว่างป้ายกํากับ 2 รายการ คอลัมน์ที่ 3 จะแสดงถึงจุดแข็งของเส้นเชื่อมต่อนั้น และจะแสดงตามความกว้างของเส้นทางระหว่างป้ายกํากับ

คอลัมน์

	คอลัมน์ที่ 0	คอลัมน์ที่ 1	คอลัมน์ที่ 2	...	คอลัมน์ N (ไม่บังคับ)
จุดประสงค์ในการใช้:	แหล่งที่มา	ปลายทาง	ค่า	...	บทบาทที่ไม่บังคับ
ประเภทข้อมูล:	สตริง	สตริง	หมายเลข	...
บทบาท:	โดเมน	โดเมน	ข้อมูล	...
บทบาทของคอลัมน์ที่เลือกระบุได้:	ไม่มี	ไม่มี	ไม่มี	...	เคล็ดลับเครื่องมือ รูปแบบ [style]

ตัวเลือกการกําหนดค่า

ชื่อ
ForceIFrame	วาดแผนภูมิภายในเฟรมในบรรทัด (โปรดทราบว่าใน IE8 ตัวเลือกนี้จะไม่สนใจ ซึ่งระบบจะวาดแผนภูมิ IE8 ทั้งหมดใน i-frame) ประเภท: บูลีน ค่าเริ่มต้น: เท็จ
ส่วนสูง	ความสูงของแผนภูมิในหน่วยพิกเซล ประเภท: จํานวน ค่าเริ่มต้น: ความสูงขององค์ประกอบที่มี
Sankey.iterations	เมื่อใช้คีย์ต่างๆ หลายระดับ บางครั้งก็ไม่แน่ชัดว่าควรจะวางโหนดไว้ที่ใดเพื่อให้อ่านได้ง่าย เครื่องมือเลย์เอาต์ D3 ทดสอบกับเลย์เอาต์โหนดอื่นซึ่งจะหยุดเมื่อมีการพยายาม `sankey.iterations` ครั้ง ยิ่งจํานวนนี้มีค่ามากเท่าใด เลย์เอาต์ของ Sankey ที่ซับซ้อนก็จะยิ่งดูสวยงาม แต่ก็มีค่าใช้จ่ายเพิ่มเติมด้วย ซึ่งหมายความว่า Sankey จะใช้เวลาแสดงผลนานขึ้น ในทางกลับกัน ยิ่งตัวเลขสั้น แผนภูมิก็จะยิ่งแสดงผลเร็ว ประเภท: จํานวนเต็ม ค่าเริ่มต้น: 32
Sankey.link	ควบคุมแอตทริบิวต์ของการเชื่อมต่อระหว่างโหนด ปัจจุบันแอตทริบิวต์ทั้งหมดเกี่ยวข้องกับสีดังนี้ sankey: { link: { color: { fill: '#efd', // Color of the link. fillOpacity: 0.8, // Transparency of the link. stroke: 'black', // Color of the link border. strokeWidth: 1 // Thickness of the link border (default 0). }, colors: [ '#a6cee3', // Custom color palette for sankey links. '#1f78b4', // Nodes will cycle through this palette '#b2df8a', // giving the links for that node the color. '#33a02c' ] } } ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
Sankey.link.โหมดสี	ตั้งค่าโหมดระบายสีสําหรับลิงก์ระหว่างโหนดต่างๆ ค่าที่เป็นไปได้มีดังนี้ `'source'` - สีของโหนดต้นทางใช้สําหรับลิงก์ไปยังโหนดเป้าหมายทั้งหมด `'target'` - สีของโหนดเป้าหมายสําหรับลิงก์ไปยังโหนดต้นทาง `'gradient'` - ลิงก์ระหว่างโหนดแหล่งที่มากับเป้าหมายจะใช้สีเป็นการไล่ระดับสีจากสีโหนดแหล่งที่มาไปยังสีโหนดเป้าหมาย `'none'` - ตัวเลือกเริ่มต้น ระบบจะตั้งค่าสีลิงก์เป็นค่าเริ่มต้น (หรือสีที่ระบุโดยตัวเลือก `sankey.link.color.fill` และ `sankey.link.color.fillOpacity`) ตัวเลือกนี้จะลบล้าง sankey.link.color ประเภท: สตริง ค่าเริ่มต้น: "ไม่มี"
Sankey.node	ควบคุมแอตทริบิวต์ของโหนด (แถบแนวตั้งระหว่างลิงก์): sankey: { node: { label: { fontName: 'Times-Roman', fontSize: 12, color: '#000', bold: true, italic: false }, interactivity: true, // Allows you to select nodes. labelPadding: 6, // Horizontal distance between the label and the node. nodePadding: 10, // Vertical distance between nodes. width: 5, // Thickness of the node. colors: [ '#a6cee3', // Custom color palette for sankey nodes. '#1f78b4', // Nodes will cycle through this palette '#b2df8a', // giving each node its own color. '#33a02c' ] } } ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
Sankey.node.colorMode	ตั้งค่าโหมดสีสําหรับโหนด Sankey ค่าที่เป็นไปได้มีดังนี้ `'unique'` - แต่ละโหนดจะได้รับสีที่ไม่ซ้ํากัน ประเภท: สตริง ค่าเริ่มต้น: "ไม่ซ้ํากัน"
เคล็ดลับเครื่องมือ	ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าองค์ประกอบต่างๆ ของเคล็ดลับเครื่องมือ หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ ให้ใช้สัญกรณ์ออบเจ็กต์ตามที่แสดงไว้ที่นี่ {textStyle: {color: '#FF0000'}, showColorCode: true} ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
tooltip.isHtml	หากตั้งค่าเป็น "จริง" ให้ใช้เคล็ดลับเครื่องมือที่แสดงผล HTML (แทนการแสดงผล SVG) ดูการปรับแต่งเนื้อหาเคล็ดลับเครื่องมือสําหรับรายละเอียดเพิ่มเติม หมายเหตุ: การปรับแต่งเนื้อหาคอลัมน์เคล็ดลับเครื่องมือจะไม่รองรับการแสดงเนื้อหาบับเบิลแผนภูมิของการปรับแต่งเคล็ดลับเครื่องมือ HTML ประเภท: บูลีน ค่าเริ่มต้น: เท็จ
tooltip.textStyle	ออบเจ็กต์ที่ระบุรูปแบบข้อความเคล็ดลับเครื่องมือ ออบเจ็กต์มีรูปแบบต่อไปนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` อาจเป็นสตริงสี HTML ใดก็ได้ เช่น `'red'` หรือ `'#00cc00'` โปรดดู `fontName` และ `fontSize` ด้วย ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
ความกว้าง	ความกว้างของแผนภูมิในหน่วยพิกเซล ประเภท: จํานวน ค่าเริ่มต้น: ความกว้างขององค์ประกอบภายใน

เมธอด

วิธีการ
`draw(data, options)`	วาดแผนภูมิ แผนภูมิยอมรับการเรียกใช้เมธอดเพิ่มเติมหลังจากเหตุการณ์ `ready` เริ่มทํางานแล้วเท่านั้น `Extended description` ประเภทการแสดงผล: ไม่มี
`getBoundingBox(id)`	แสดงผลออบเจ็กต์ที่มีด้านซ้าย ด้านบน ความกว้าง และความสูงขององค์ประกอบแผนภูมิ `id` ระบบยังไม่ได้บันทึกรูปแบบสําหรับ `id` (ค่าที่แสดงผลของเครื่องจัดการเหตุการณ์) ไว้ แต่นี่คือตัวอย่าง `var cli = chart.getChartLayoutInterface();` ความสูงของพื้นที่แผนภูมิ `cli.getBoundingBox('chartarea').height` ความกว้างของแถบที่ 3 ในอนุกรมแรกของแผนภูมิแท่งหรือแผนภูมิคอลัมน์ `cli.getBoundingBox('bar#0#2').width` กรอบล้อมรอบที่ 5 ของแผนภูมิวงกลม `cli.getBoundingBox('slice#4')` กรอบข้อมูลแผนภูมิในแผนภูมิแนวตั้ง (เช่น คอลัมน์) `cli.getBoundingBox('vAxis#0#gridline')` กรอบข้อมูลแผนภูมิของแผนภูมิแนวนอน (เช่น แท่ง) `cli.getBoundingBox('hAxis#0#gridline')` ค่าจะสัมพันธ์กับคอนเทนเนอร์ของแผนภูมิ เรียกใช้หลังจากการวาดแผนภูมิ ประเภทการแสดงผล: ออบเจ็กต์
`getSelection()`	แสดงผลอาร์เรย์ของเอนทิตีแผนภูมิที่เลือก เอนทิตีที่เลือกได้คือแถบ รายการคําอธิบาย และหมวดหมู่ สําหรับแผนภูมินี้ คุณจะเลือกได้เพียงเอนทิตีเดียวในช่วงเวลาหนึ่งๆ `Extended description` ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก
`setSelection()`	เลือกเอนทิตีของแผนภูมิที่ระบุ ยกเลิกรายการที่เลือกไว้ก่อนหน้านี้ เอนทิตีที่เลือกได้คือแถบ รายการคําอธิบาย และหมวดหมู่ สําหรับแผนภูมินี้ คุณจะเลือกเอนทิตีได้ครั้งละ 1 รายการเท่านั้น `Extended description` ประเภทการแสดงผล: ไม่มี
`clearChart()`	ล้างแผนภูมิและปล่อยทรัพยากรทั้งหมดที่จัดสรร ประเภทการแสดงผล: ไม่มี

กิจกรรม

ชื่อ
`error`	เริ่มทํางานเมื่อเกิดข้อผิดพลาดขณะพยายามแสดงผลแผนภูมิ คุณสมบัติ: id, message
`onmouseover`	เริ่มทํางานเมื่อผู้ใช้วางเมาส์เหนือเอนทิตีภาพ ส่งกลับดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง แถบจะสัมพันธ์กับเซลล์ในตารางข้อมูล รายการสัญลักษณ์ในคอลัมน์ (ดัชนีแถวเป็นค่าว่าง) และหมวดหมู่ของแถว (ดัชนีคอลัมน์เป็นศูนย์) คุณสมบัติ: แถว คอลัมน์
`onmouseout`	เริ่มทํางานเมื่อผู้ใช้เลื่อนเมาส์ออกจากเอนทิตีภาพ ส่งกลับดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง แถบจะสัมพันธ์กับเซลล์ในตารางข้อมูล รายการสัญลักษณ์ในคอลัมน์ (ดัชนีแถวเป็นค่าว่าง) และหมวดหมู่ของแถว (ดัชนีคอลัมน์เป็นศูนย์) คุณสมบัติ: แถว คอลัมน์
`ready`	แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกหลังจากวาด คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด `draw` และเรียกใช้หลังจากที่เหตุการณ์เริ่มทํางานแล้วเท่านั้น พร็อพเพอร์ตี้: ไม่มี
`select`	เริ่มทํางานเมื่อผู้ใช้คลิกภาพ หากต้องการดูสิ่งที่เลือกแล้ว ให้โทรหา `getSelection()` พร็อพเพอร์ตี้: ไม่มี

นโยบายข้อมูล

โค้ดและข้อมูลทั้งหมดได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใด