به کار بردن D3.js در یک صفحه از وب سایت و رسم یک شکل اولیه برای شروع کار با D3.js

کتابخانه D3.js ، صرفا یک فایل با پسوند js می باشد که شامل یک سری کدهای JavaScript است و بنابراین برای به کار بردن آن در یک صفحه از وب سایت، باید به آن فایل js در صفحه مورد نظر، ارجاع بدهیم.

به دو روش می توان به فایل js مورد نظر ارجاع داد، یکی اینکه به آدرس آن در اینترنت (در خود وب سایت d3js.org) ارجاع دهیم و دیگری اینکه فایل js مورد نظر را دانلود نموده و در بخشی از وب سایت خود قرار دهیم و آنگاه در صفحات مورد نظرمان از وب سایت خود، به آن ارجاع دهیم.

بنده معمولا ترجیح می دهم که فایل را دانلود کنم و آن را در خود وب سایت قرار دهم تا در صورت بروز مشکل برای سایر وب سایت ها، کدهای وب سایت ما به آنها وابسته نباشد و دچار مشکل نشود.

برای دانلود فایل js مربوط به کتابخانه D3.js ، به وب سایت آن مراجعه می کنیم :

https://d3js.org

که صفحه اول آن به صورت زیر می باشد :

به کار بردن D3.js در یک صفحه از وب سایت و رسم یک شکل اولیه برای شروع کار با D3.js

در همین صفحه اول وب سایت، یک لینک با عنوان d3.zip وجود دارد که با کلیک بر روی آن، فایلی با نام d3.zip دانلود می شود :

پس از دانلود فایل d3.zip ، آن را از حالت فشره خارج می کنیم و با باز کردن پوشه (Folder) مربوط به آن، فایل های زیر را مشاهده می نماییم :

در این پوشه، دو فایل با نام های d3.js و d3.min.js وجود دارد که هر کدام، همان فایل js مربوط به کتابخانه D3.js می باشند، با این تفاوت که در فایل d3.js ، کدهای اصلی (بدون فشرده سازی) کتابخانه D3.js وجود دارند که می توانید آنها را بخوانید و متوجه کدنویسی آنها شوید، اما فایل d3.min.js شامل همان کدهای فایل d3.js می باشد که فشرده شده اند تا حجم آنها به کمترین مقدار ممکن برسد (نسخه فشرده - minified version) و معمولا همین فایل d3.min.js در صفحات وب سایت به کار می رود تا با توجه به کمتر بودن حجم آن، سرعت بارگذاری صفحات وب سایت، افزایش یابد. بنابراین ما از فایل d3.min.js استفاده خواهیم کرد.

در یک پوشه (Folder) دلخواه، یک فایل HTML با نام index.html می سازیم و در کنار آن، فایل d3.min.js را قرار می دهیم :

کد اولیه فایل index.html را به صورت زیر می نویسیم :

اکنون برای ارجاع به فایل d3.min.js ، باید کد زیر را در بین زوج تگ head از کدهای صفحه HTML بنویسیم (بر اساس یک آدرس نسبی برای ارجاع به فایل) :

یعنی کدهای صفحه index.html به صورت زیر خواهد بود :

نکته

اگر قصد داشتیم که به فایل js موجود در وب سایت d3js.org ارجاع دهیم (بدون دانلود فایل کتابخانه D3.js)، باید کد زیر را در صفحه HTML ذکر می کردیم :

اکنون باید مقداری کد HTML و کد JavaScript را برای رسم یک شکل اولیه (و تا حدودی ساده)، در صفحه بنویسیم، تا با نمایش شکل رسم شده در صفحه، متوجه شویم که کتابخانه D3.js به درستی در صفحه HTML به کار رفته است.

برای این منظور، کدهای HTML و JavaScript زیر را در نظر می گیریم (فعلا کاری با یادگیری عملکرد کدها نداریم) (منبع کدها، در انتهای این کلید آموزشی، ذکر شده است) :

از این کدها، فعلا در همین حد بدانید که تگ svg در ساختار HTML صفحه ذکر می شود، تا شکل در آن رسم شود و یک نام کلاس (Class) برابر kelidestan برای آن مشخص کرده ایم که در کدهای JavaScript ، توسط همین نام کلاس (Class) شناسایی شده و کدهای JavaScript ، شکل مورد نظرمان را در این تگ svg رسم خواهند کرد (کدهای JavaScript در بین زوج تگ script نوشته شده اند).

بنابراین کل کدهای صفحه index.html به صورت زیر خواهد بود (کدهای قبلی را در بین زوج تگ body از صفحه می نویسیم) :

<!DOCTYPE html>
<html>
    <head>
        <script src="d3.min.js"></script>
    </head>

<body>
        <svg class="kelidestan" width="400" height="200">
        </svg>
        
        
        <script>
            var sales = [
                { product: 'Part A',  count: 12 },
                { product: 'Part B',  count: 7 },
                { product: 'Part C', count: 6 },
            ];
            
            
            
            var pie = d3.pie()
                .value(function(d) { return d.count })
            
            var slices = pie(sales);
            // the result looks roughly like this:
            [
                {
                    data: sales[0],
                    endAngle: 3.0159289474462017,
                    startAngle: 0,
                    value: 12
                },
                {
                    data: sales[1],
                    startAngle: 3.0159289474462017,
                    endAngle: 4.775220833456486,
                    value: 7
                },
                {
                    data: sales[2],
                    startAngle: 4.775220833456486,
                    endAngle: 6.283185307179587,
                    value: 6
                }
            ]
            
            
            
            var arc = d3.arc()
                .innerRadius(0)
                .outerRadius(50);
            
            // helper that returns a color based on an ID
            var color = d3.scaleOrdinal(d3.schemeCategory10);
            
            var svg = d3.select('svg.kelidestan');
            var g = svg.append('g')
                .attr('transform', 'translate(200, 50)')
            
            g.selectAll('path.slice')
                .data(slices)
                    .enter()
                        .append('path')
                            .attr('class', 'slice')
                                .attr('d', arc)
                                .attr('fill', function(d) {
                                    return color(d.data.product);
                            });
            
            // building a legend is as simple as binding
            // more elements to the same data. in this case,
            // <text> tags
            svg.append('g')
                .attr('class', 'legend')
                    .selectAll('text')
                    .data(slices)
                        .enter()
                            .append('text')
                                .text(function(d) { return '• ' + d.data.product; })
                                .attr('fill', function(d) { return color(d.data.product); })
                                .attr('y', function(d, i) { return 20 * (i + 1); })
        </script>
    </body>
</html>

نتیجه :

مشاهده می کنید که شکل به درستی رسم شده است.

در این مثال، کدهای زیادی را به کار بردیم تا یک شکل نسبتا کامل را رسم کنیم، اما نیازی نیست که فعلا بخش های مختلف کدهای آن را بررسی کنید، چون در کلیدهای آموزشی بعدی، مثال های ساده تری را شرح خواهیم داد تا ساختار کدها را از مراحل ساده و به صورت قدم به قدم، یاد بگیرید.

در این کلید آموزشی، صرفا چگونگی به کار بردن کتابخانه D3.js ، در یک صفحه از وب سایت را شرح دادیم.

منابع و لینک های مفید

http://square.github.io/intro-to-d3/examples/

دسته بندی مباحث اولیه، در D3.js

نویسنده علیرضا گلمکانی

شماره کلید 26339

گزینه ها

به اشتراک گذاری (Share) در شبکه های اجتماعی

FaceBook Twitter Digg Reddit LinkedIn Pinterest StumbleUpon

نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)

به کار بردن D3.js در یک صفحه از وب سایت و رسم یک شکل اولیه برای شروع کار با D3.js

نتیجه :

جستجو در کلیدستان، توسط گوگل

جستجو در عنوان کلیدها

دسترسی سریع