Reactjs مع D3js treemap

Question

في محاولة لتحويل مايك بوستوك هو زوومابلي treemap إلى تتفاعل المكونات.جزء من الطريق إلى هناك ولكن لم تكن متأكدا من حول أفضل طريقة لتمرير حول البيانات بين مكونات حين أن البيانات يعتمد على DOM (أيالعرض).

جاء عبر بن سميث بلوق عن خلط تتفاعل D3js.الاشياء العظيمة.

باستخدام التمهيد للسيطرة على التصميم المغلق.تعريف svg مع مطلقة موقف ماكس العرض (100%) داخل النسبي الحاوية:

 .svg-container {
   position: relative;
   padding-bottom: 30%;
   overflow: hidden;
   }

 .svg-content {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 } 

لذا عرض svg التغييرات كما يتم تغيير حجم الشاشة.على افتراض أن treemap عقدة سمات مثل x,y,dx,dy إلى القيم الثابتة لا procents.التفكير لدي لمشاهدة نافذة تغيير حجم الحدث ، لسلخ الجديدة svg الأبعاد ("parseInt(d3.حدد('.svg-content').أسلوب ("العرض"), 10);") و قوة Reactjs إلى إعادة تقديم ("رد فعل.renderComponent").

Answer 1

لديك خيارين:

• تعطي الحالية الطول والعرض إلى treemap تخطيط و حساب treemap كل مرة الطول والعرض التغيير ؛ أو ،

• حساب treemap تخطيط مع الحجم الافتراضي (الحد الأقصى الطول والعرض سوف يكون 1 من كل شيء آخر نسبة منها) ، واستخدام الحالي الطول والعرض كما عامل تحجيم عند رسم المستطيلات.

ثم عند ارتفاع أو عرض التغييرات ، تحتاج فقط إلى رسم لا حساب التخطيط.منذ كنت في محاولة للحفاظ على مكونات مختلفة منفصلة ، يبدو أن النهج الأكثر منطقية.كما هو فقط أكثر كفاءة حيث أنت فقط تشغيل وظيفة تخطيط مرة واحدة.يمكنك مجرد الاستيلاء الحالية الطول والعرض من داخل رسم الدالة (والتي بالطبع سوف يكون الوصول إلى svg عقدة) و تخطيط عنصر لا تحتاج إلى معرفة أي شيء عن أبعاد.

أنا خائف parseInt(d3.select('.svg-content').style('width'), 10); لن أفعل ما كنت على أمل أن ترجع فقط أنماط مضمنة.سوف تحتاج إلى الاستيلاء على حسابها العرض.هناك بعض الأمثلة على كيفية القيام بذلك في نهاية هذا الجواب طويل على التكبير.