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