DC.js - baseMixin

baseMixinมีวิธีการพื้นฐานที่จำเป็นในการสร้างแผนภูมิประเภทใดก็ได้ มีตั้งแต่การตั้งค่าความกว้างของแผนภูมิไปจนถึงการกรองแผนภูมิขั้นสูง

ตัวเลือกแผนภูมิทั่วไป

basicMixinมีวิธีการแผนภูมิมากมายเพื่อรับ / ตั้งค่าคุณสมบัติของแผนภูมิ มีดังนี้

  • chartID() - ส่งกลับ ID ตัวเลขภายในของแผนภูมิ

  • chartGroup( [chartGroup])- รับหรือตั้งค่ากลุ่มที่เป็นของแผนภูมิ ใน DC.js แผนภูมิสามารถจัดกลุ่มเป็นชุดเดียวได้ แผนภูมิทั้งหมดในกลุ่มคาดว่าจะแชร์ชุดข้อมูล Crossfilter เดียวกัน ซึ่งจะแสดงผลและวาดใหม่พร้อมกัน

mychart.chartGroup('dashboard');
  • minWidth( [minWidth]) - ตั้งค่าความกว้างขั้นต่ำของแผนภูมิ

mychart.minWidth(300);
  • width( [width]) - รับหรือกำหนดความกว้างของแผนภูมิ

mychart.width(600);
  • minHeight( [minHeight]) - รับหรือกำหนดความสูงขั้นต่ำของแผนภูมิ

mychart.minHeight(300);
  • height( [height]) - รับหรือกำหนดความสูงของแผนภูมิ

mychart.height(300);
  • title( [titleFunction])- รับหรือตั้งค่าฟังก์ชันหัวเรื่อง Title คือหัวเรื่องขององค์ประกอบ SVG ขององค์ประกอบลูกในแผนภูมิ (เช่นแท่งเดียวในแผนภูมิแท่ง) ชื่อในแผนภูมิแสดงเป็นคำแนะนำเครื่องมือในเบราว์เซอร์

mychart.title(function(data) { 
   return d.key + ': ' + d.value; 
});
  • label( labelFunction[??]) - คล้ายกับเมธอด title () แต่ตั้งค่าป้ายกำกับแทนชื่อ

mychart.label(function(data) { 
   return d.key + ': ' + d.value; 
});
  • options(opts)- ตั้งค่าตัวเลือกแผนภูมิโดยใช้วัตถุ JavaScript แต่ละคีย์แสดงถึงวิธีการที่เกี่ยวข้องที่มีอยู่ในแผนภูมิและวิธีการที่ตรงกันจะถูกเรียกด้วยค่าที่เกี่ยวข้อง

mychart.options ({
   'width' : 300,
   'height' : 300
});

ที่นี่วิธีการ width () และ height () จะถูกยิงด้วยค่าที่ระบุ

  • legend( [legend])- แนบตำนานกับแผนภูมิ คำอธิบายแผนภูมิสามารถสร้างได้โดยใช้ไฟล์d3.legend() วิธี.

mychart.legend (
   dc.legend()
      .x(500)
      .y(50)
      .itemHeight(12)
      .gap(4))
  • anchor( parent[??])- ตั้งค่าราก SVGElement ให้เป็นรากของแผนภูมิที่มีอยู่หรือตัวเลือกเดี่ยว D3 ที่ถูกต้อง นอกจากนี้ยังสามารถตั้งค่ากลุ่มแผนภูมิโดยใช้อาร์กิวเมนต์ที่สอง

  • anchorName() - รับ DOM ID ของตำแหน่งที่ยึดของแผนภูมิ

  • svg( [svgElement]) - ส่งกลับ SVGElement ของแผนภูมิ

  • resetSvg() - รีเซ็ตคอนเทนเนอร์ SVG ใน DOM

  • root( [rootElement]) - รับคอนเทนเนอร์รูทของแผนภูมิ

ตัวเลือกข้อมูล

basicMixinมีวิธีการตั้งค่าข้อมูลสำหรับแผนภูมิ ข้อมูลถูกตั้งค่าเป็นมิติและกลุ่ม Crossfilter นอกจากนี้ยังมีตัวเลือกในการรับชุดข้อมูลพื้นฐาน

  • dimension( [dimension])- ตั้งค่าหรือรับขนาดของแผนภูมิ มิติข้อมูลคือมิติข้อมูล Crossfilter ที่ถูกต้อง

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
  • group( group[??])- ตั้งค่าหรือรับกลุ่มของแผนภูมิ กลุ่มคือกลุ่ม Crossfilter ที่ถูกต้อง สามารถตั้งชื่อกลุ่มโดยใช้อาร์กิวเมนต์ที่สองเพื่อใช้ในโค้ดในภายหลัง

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
mychart.group(ageDimension.group(crossfilter.reduceCount()));
  • data( [callback]) - ตั้งค่าการโทรกลับข้อมูลและช่วยให้เราได้รับชุดข้อมูลของแผนภูมิ

// get all groups
mychart.data(function (group) { 
   return group.all(); 
});

// get top five groups
mychart.data(function (group) { 
   return group.top(5); 
});
  • keyAccessor( [keyAccessor])- รับหรือตั้งค่าฟังก์ชันการเข้าถึงคีย์ ใช้เพื่อดึงคีย์จากกลุ่ม Crossfilter ที่อยู่เบื้องหลัง คีย์นี้ใช้สำหรับชิ้นส่วนในแผนภูมิวงกลมและแกน x ในแผนภูมิเส้น / แท่ง ค่าเริ่มต้นkey accessor ฟังก์ชั่นมีดังนี้ -

chart.keyAccessor(function(d) { return d.key; });
  • valueAccessor( [valueAccessor])- รับหรือตั้งค่าฟังก์ชันตัวเข้าถึงค่า ใช้เพื่อดึงค่าจากกลุ่ม Crossfilter ที่อยู่ภายใต้ ค่านี้ใช้สำหรับขนาดสไลซ์ในแผนภูมิวงกลมและตำแหน่งแกน y ในแผนภูมิเส้น / แท่ง ค่าเริ่มต้นvalue accessor ฟังก์ชั่นมีดังนี้ -

chart.valueAccessor(function(d) { return d.value; });
  • ordering( [orderFunction])- รับหรือตั้งค่าฟังก์ชันการสั่งซื้อเพื่อเรียงลำดับมิติข้อมูล ตามค่าเริ่มต้นแผนภูมิจะใช้crossfilter.quicksort.by เพื่อจัดเรียงองค์ประกอบ

_chart.ordering(dc.pluck('key'));

ตัวเลือกตัวกรอง

การกรองเป็นจุดเด่นอย่างหนึ่งของ DC.js เราสามารถใช้ตัวกรองอย่างน้อยหนึ่งตัวบนวัตถุแผนภูมิโดยตรงโดยใช้วิธีการกรอง () และเรียกวิธีการ redrawGroup () หรือ dc.redrawAll () ของแผนภูมิเพื่อดูผลการกรองบนแผนภูมิ โดยค่าเริ่มต้นออบเจ็กต์แผนภูมิจะใช้ตัวกรองตั้งแต่หนึ่งตัวขึ้นไปโดยใช้วิธีการกรอง () ใช้กับชุดข้อมูล Crossfilter () ที่อยู่ภายใต้รับข้อมูลที่กรองจาก Crossfilter และวาดแผนภูมิใหม่โดยใช้ข้อมูลที่กรอง DC.js มีวิธีจัดการการกรองในแผนภูมิดังต่อไปนี้

ตัวกรอง ([ตัวกรอง])

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

mychart.filter(10);

หากต้องการลบตัวกรองทั้งหมดให้เรียกใช้วิธีการกรองด้วย nullมูลค่า. ตัวกรองอาจเป็นรายการใดรายการหนึ่งต่อไปนี้ -

  • null - แผนภูมิจะลบตัวกรองทั้งหมดที่ใช้ก่อนหน้านี้

  • single value - แผนภูมิจะเรียกใช้วิธีการกรองของ Crossfilter และส่งค่าที่ให้มา

  • dc.filters.RangedFilter- ยอมรับสองค่าต่ำและสูง แผนภูมิจะกรองข้อมูลทั้งหมดออกยกเว้นค่าในช่วงระหว่างค่าต่ำและค่าสูง

  • dc.filters.TwoDimensionalFilter - ยอมรับค่าสองมิติที่ใช้ในแผนที่ความร้อน

  • dc.filters.RangedTwoDimensionalFilter - คล้ายกับ dc.filters.RangedFilter ยกเว้นว่าจะยอมรับค่าสองมิติที่ใช้ในแปลงกระจายเท่านั้น

hasFilter ([ตัวกรอง])

ตรวจสอบว่ามีตัวกรองที่ให้มาหรือไม่ในแผนภูมิ

แทนที่ฟิลเตอร์ ([ตัวกรอง])

แทนที่ตัวกรองปัจจุบันของแผนภูมิด้วยตัวกรองที่ให้มา

ตัวกรอง ()

ส่งคืนตัวกรองปัจจุบันทั้งหมดที่เกี่ยวข้องกับแผนภูมิ

ตัวกรองทั้งหมด ()

ล้างตัวกรองทั้งหมดที่เกี่ยวข้องกับแผนภูมิ

filterHandler ([filterHandler])

รับหรือตั้งค่าฟังก์ชันตัวจัดการตัวกรอง แผนภูมิใช้ฟังก์ชันตัวจัดการตัวกรองเพื่อกรองชุดข้อมูลพื้นฐานโดยใช้ตัวกรอง แผนภูมิมีฟังก์ชันตัวจัดการตัวกรองเริ่มต้นและสามารถแทนที่ได้ด้วยฟังก์ชันตัวจัดการตัวกรองแบบกำหนดเองโดยใช้วิธีนี้ ตัวจัดการตัวกรองเริ่มต้นมีดังนี้ -

chart.filterHandler(function (dimension, filters) {
   if (filters.length === 0) {
      
      // the empty case (no filtering)
      dimension.filter(null);
   } else if (filters.length === 1 && !filters[0].isFiltered) {
      
      // single value and not a function-based filter
      dimension.filterExact(filters[0]);
   } else if (filters.length === 1 && filters[0].filterType === 'RangedFilter') {
      
      // single range-based filter
      dimension.filterRange(filters[0]);
   } else {
      
      // an array of values, or an array of filter objects
      dimension.filterFunction(function (d) {
         
         for (var i = 0; i < filters.length; i++) {
            var filter = filters[i];
               
            if (filter.isFiltered && filter.isFiltered(d)) {
               return true;
            } else if (filter <= d && filter >= d) {
               return true;
            }
         }
         return false;
      });
   }
   return filters;
});

hasFilterHandler ([hasFilterHandler])

รับหรือตั้งค่าฟังก์ชันตัวจัดการมีตัวกรอง แผนภูมิใช้ฟังก์ชันนี้เพื่อตรวจสอบว่ามีตัวกรองอยู่ในคอลเล็กชันตัวกรองของแผนภูมิหรือไม่ ตัวจัดการตัวกรองมีค่าเริ่มต้นมีดังนี้ -

chart.hasFilterHandler(function (filters, filter) {
   if (filter === null || typeof(filter) === 'undefined') {
      return filters.length > 0;
   }
   
   return filters.some(function (f) {
      return filter <= f && filter >= f;
   });
});

addFilterHandler ([addFilterHandler])

รับหรือตั้งค่าฟังก์ชันตัวจัดการตัวกรองเพิ่มเติม แผนภูมิใช้ฟังก์ชันนี้เพื่อเพิ่มตัวกรองลงในคอลเล็กชันตัวกรองของแผนภูมิ ตัวจัดการ Add-filter เริ่มต้นมีดังนี้ -

chart.addFilterHandler(function (filters, filter) {
   filters.push(filter);
   return filters;
});

removeFilterHandler ([removeFilterHandler])

รับหรือตั้งค่าฟังก์ชันตัวจัดการการลบตัวกรอง แผนภูมิใช้ฟังก์ชันนี้เพื่อลบตัวกรองออกจากคอลเล็กชันตัวกรองของแผนภูมิ ค่าเริ่มต้นลบตัวกรองมีดังนี้ -

chart.removeFilterHandler(function (filters, filter) {
   for (var i = 0; i < filters.length; i++) {
      
      if (filters[i] <= filter && filters[i] >= filter) {
         filters.splice(i, 1);
         break;
      }
      
   }
   return filters;
});

resetFilterHandler ([resetFilterHandler])

รับหรือตั้งค่าฟังก์ชันตัวจัดการตัวกรองการรีเซ็ต แผนภูมิใช้ฟังก์ชันนี้เพื่อรีเซ็ตคอลเล็กชันตัวกรองของแผนภูมิ ค่าเริ่มต้นรีเซ็ตตัวกรองมีดังนี้ -

function (filters) {
   return [];
}

filterPrinter ([filterPrinterFunction])

รับหรือตั้งค่าฟังก์ชันตัวกรองเครื่องพิมพ์ แผนภูมิใช้ฟังก์ชันนี้เพื่อพิมพ์ข้อมูลตัวกรอง

กระทำตัวจัดการ ()

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

ตัวเลือกเหตุการณ์

DC.js กำหนดชุดเหตุการณ์ที่ จำกัด เพื่อทำฟังก์ชันบางอย่างเช่นการกรองการซูมเป็นต้นรายการของเหตุการณ์ที่กำหนดใน DC.js มีดังต่อไปนี้ -

  • renderlet - เริ่มทำงานหลังจากการเปลี่ยนภาพจะถูกวาดใหม่และแสดงผล

  • pretransition - เริ่มทำงานก่อนการเปลี่ยนแปลงจะเริ่มขึ้น

  • preRender - เริ่มทำงานก่อนการแสดงผลแผนภูมิ

  • postRender - เริ่มทำงานหลังจากที่แผนภูมิแสดงผลเสร็จสิ้นรวมถึงตรรกะของ renderlet ทั้งหมด

  • preRedraw - เริ่มทำงานก่อนที่จะวาดแผนภูมิใหม่

  • postRedraw - เริ่มทำงานหลังจากแผนภูมิเสร็จสิ้นการวาดใหม่รวมถึงตรรกะของ renderlet ทั้งหมด

  • filtered - เริ่มทำงานหลังจากใช้ตัวกรองเพิ่มหรือลบออก

  • zoomed - เริ่มทำงานหลังจากการซูมถูกเรียกใช้

basicMixin ให้วิธีการ on(event, listener) เพื่อตั้งค่าฟังก์ชันการโทรกลับสำหรับเหตุการณ์ที่กำหนดไว้ข้างต้นทั้งหมด

  • on(event, listener) - ตั้งค่าฟังก์ชันการโทรกลับหรือฟังสำหรับเหตุการณ์เฉพาะ

  • onClick(datum)- ส่งผ่านไปยัง D3 เป็นตัวจัดการ onClick สำหรับแต่ละแผนภูมิ ลักษณะการทำงานเริ่มต้นคือการกรองข้อมูลที่คลิก (ส่งผ่านไปยังการเรียกกลับ) และวาดกลุ่มแผนภูมิใหม่

ตัวเลือกการแสดงผล

BasicMixin มีรายการวิธีการแสดงผลแผนภูมิ ใช้ในการวาดแผนภูมิและมีดังนี้ -

  • render()- แสดงผลแผนภูมิ โดยทั่วไปจะใช้ก่อนเมื่อวาดแผนภูมิ

  • renderGroup() - แสดงผลแผนภูมิทั้งหมดในกลุ่มตามที่เป็นของแผนภูมินี้

  • renderLabel( [renderLabel]) - เปิด / ปิดการแสดงฉลาก

  • renderTitle( [renderTitle]) - เปิด / ปิดการแสดงผลชื่อเรื่อง

  • redraw() - วาดใหม่ทั้งแผนภูมิ

  • redrawGroup() - วาดแผนภูมิทั้งหมดในกลุ่มใหม่เนื่องจากแผนภูมินี้เป็นของ

ตัวเลือกการเปลี่ยน

BasicMixin มีวิธีการตั้งค่าเอฟเฟกต์การเปลี่ยนแปลงของแผนภูมิและมีดังนี้ -

  • transitionDelay( [delay]) - ตั้งค่าหรือรับความล่าช้าในการเปลี่ยนภาพเคลื่อนไหว (ในหน่วยมิลลิวินาที) สำหรับอินสแตนซ์แผนภูมินี้

  • transitionDuration( [duration]) - ตั้งค่าหรือรับระยะเวลาการเปลี่ยนภาพเคลื่อนไหว (ในหน่วยมิลลิวินาที) สำหรับอินสแตนซ์แผนภูมินี้

  • useViewBoxResizing( [useViewBoxResizing]) - หากตั้งค่าไว้ให้ปรับขนาดแผนภูมิตามแอตทริบิวต์ SVG viewbox

  • controlsUseVisibility( [controlsUseVisibility]) - หากตั้งค่าให้ใช้แอตทริบิวต์การมองเห็นแทนแอตทริบิวต์การแสดงผลเพื่อแสดง / ซ่อนการรีเซ็ตแผนภูมิและการควบคุมตัวกรอง

ในบทต่อไปเราจะเข้าใจ capMixin