توجيه نص دائرة إلى وسطها

لإضافة نص في وسط الدائرة وضمان تناسبه مع حجم الدائرة، يمكنك استخدام دالة textLength() و lengthAdjust() مع العنصر في SVG. هذه الدوال تسمح لك بتعديل طول النص تلقائيًا بناءً على حجم الدائرة.

هناك بعض الخطوات التي يمكنك اتباعها لتحقيق هذا الهدف:

1. ضبط موقع النص بالنسبة للدائرة.
2. ضبط طول النص ليناسب حجم الدائرة.

قم بتحرير دالة ellipseAdd() كما يلي:

javascriptCopy code
function ellipseAdd() {
    // إضافة دائرة
    d3.select(ellipseSelected.parentNode)
        .append("circle")
        .attr('cx', parentNodeX)
        .attr('cy', parentNodeY)
        .attr("r", 10)
        .attr("stroke-width", 1)
        .attr("stroke", "white")
        .style('fill', '#CE2029');

    // إضافة نص في وسط الدائرة
    d3.select(ellipseSelected.parentNode)
        .append("text")
        .attr('x', parentNodeX)
        .attr('y', parentNodeY + 4) // يمكنك تعديل هذه القيمة حسب حجم الدائرة والنص
        .text(0)
        .style('fill', 'white')
        .attr('text-anchor', 'middle') // موقع النص في وسط الدائرة
        .attr('dominant-baseline', 'middle') // موقع النص في وسط الدائرة
        .attr("font-size", "8px")
        .attr('lengthAdjust', 'spacingAndGlyphs') // تحديد طول النص بناءً على حجم الدائرة
        .attr('textLength', 20); // تحديد طول النص بناءً على حجم الدائرة
}

هذه الخطوات تجعل النص يتناسب مع حجم الدائرة ويظل في وسطها. يمكنك تعديل قيم x, y, textLength وأي خصائص أخرى حسب حجم الدائرة والنص.

عند إضافة نص إلى دائرة في SVG، يمكنك تعيين خصائص x و y لتحديد موضع النص داخل الدائرة. بالإضافة إلى ذلك، يمكنك استخدام خاصية font-size لتحديد حجم النص و text-anchor لمحاذاته بشكل صحيح داخل الدائرة.

عندما يكون النص كبيرًا ولا يناسب الدائرة، يمكنك استخدام الخاصية textLength و lengthAdjust لتكييف حجم النص بشكل تلقائي وضمان تناسبه مع حجم الدائرة.

يمكنك استخدام دالة getBBox() للحصول على حجم الدائرة واستخدام هذه المعلومات لتعيين موقع وحجم النص بشكل ديناميكي بناءً على حجم الدائرة.