112112 </ style >
113113 </ head >
114114 < body >
115- < h4 id ="version-1-7-2 "> Version 1.7.2 </ h4 >
115+ < h4 id ="version-1-7-3 "> Version 1.7.3 </ h4 >
116116< p > The entire dc.js library is scoped under < strong > dc</ strong > name space. It does not introduce anything else into the global
117117name space.</ p >
118118< ul >
@@ -203,16 +203,16 @@ <h4 id="-select-selector-">.select(selector)</h4>
203203< p > Execute in scope d3 single selection using the given selector and return d3 selection result. Roughly the same as:</ p >
204204< pre > < code class ="lang-js "> d3.< span class ="operator "> < span class ="keyword "> select</ span > (< span class ="string "> "#chart-id"</ span > ).< span class ="keyword "> select</ span > (selector);</ span > </ code > </ pre >
205205< p > This function is < strong > not chainable</ strong > since it does not return a chart instance; however the d3 selection result is chainable
206- from d3’ s perspective.</ p >
206+ from d3' s perspective.</ p >
207207< h4 id ="-selectall-selector- "> .selectAll(selector)</ h4 >
208208< p > Execute in scope d3 selectAll using the given selector and return d3 selection result. Roughly the same as:</ p >
209209< pre > < code class ="lang-js "> d3< span class ="variable "> .select</ span > (< span class ="string "> "#chart-id"</ span > )< span class ="variable "> .selectAll</ span > (< span class ="keyword "> selector</ span > );</ code > </ pre >
210210< p > This function is < strong > not chainable</ strong > since it does not return a chart instance; however the d3 selection result is
211- chainable from d3’ s perspective.</ p >
211+ chainable from d3' s perspective.</ p >
212212< h4 id ="-anchor-anchorchart-anchorselector-chartgroup- "> .anchor([anchorChart/anchorSelector], [chartGroup])</ h4 >
213- < p > Set the svg root to either be an existing chart’ s root or the first element returned from a d3 css string selector. Optionally registers the chart within the chartGroup. This class is called internally on chart initialization, but be called again to relocate the chart. However, it will orphan any previously created SVG elements.</ p >
213+ < p > Set the svg root to either be an existing chart' s root or the first element returned from a d3 css string selector. Optionally registers the chart within the chartGroup. This class is called internally on chart initialization, but be called again to relocate the chart. However, it will orphan any previously created SVG elements.</ p >
214214< h4 id ="-anchorname- "> .anchorName()</ h4 >
215- < p > Return the dom ID for chart’ s anchored location</ p >
215+ < p > Return the dom ID for chart' s anchored location</ p >
216216< h4 id ="-root-rootelement- "> .root([rootElement])</ h4 >
217217< p > Returns the root element where a chart resides. Usually it will be the parent div element where svg was created. You
218218can also pass in a new root element however this is usually handled as part of the dc internal. Resetting root element
@@ -222,16 +222,16 @@ <h4 id="-svg-svgelement-">.svg([svgElement])</h4>
222222handled as part of the dc internal. Resetting svg element on a chart outside of dc internal might have unexpected
223223consequences.</ p >
224224< h4 id ="-resetsvg- "> .resetSvg()</ h4 >
225- < p > Remove the chart’ s SVG elements from the dom and recreate the container SVG element.</ p >
225+ < p > Remove the chart' s SVG elements from the dom and recreate the container SVG element.</ p >
226226< h4 id ="-filterprinter-filterprinterfunction- "> .filterPrinter([filterPrinterFunction])</ h4 >
227227< p > Set or get filter printer function. Filter printer function is used to generate human friendly text for filter value(s)
228228associated with the chart instance. By default dc charts shipped with a default filter printer implementation dc.printers.filter
229229that provides simple printing support for both single value and ranged filters.</ p >
230230< h4 id ="-turnoncontrols-turnoffcontrols- "> .turnOnControls() & .turnOffControls()</ h4 >
231231< p > Turn on/off optional control elements within the root element. dc.js currently support the following html control elements.</ p >
232232< ul >
233- < li > root.selectAll(“ .reset” ) elements are turned on if the chart has an active filter. This type of control elements are usually used to store reset link to allow user to reset filter on a certain chart. This element will be turned off automatically if the filter is cleared.</ li >
234- < li > root.selectAll(“ .filter” ) elements are turned on if the chart has an active filter. The text content of this element is then replaced with the current filter value using the filter printer function. This type of element will be turned off automatically if the filter is cleared.</ li >
233+ < li > root.selectAll(" .reset" ) elements are turned on if the chart has an active filter. This type of control elements are usually used to store reset link to allow user to reset filter on a certain chart. This element will be turned off automatically if the filter is cleared.</ li >
234+ < li > root.selectAll(" .filter" ) elements are turned on if the chart has an active filter. The text content of this element is then replaced with the current filter value using the filter printer function. This type of element will be turned off automatically if the filter is cleared.</ li >
235235</ ul >
236236< h4 id ="-transitionduration-duration- "> .transitionDuration([duration])</ h4 >
237237< p > Set or get animation transition duration(in milliseconds) for specific chart instance. Default duration is 750ms.</ p >
@@ -243,7 +243,7 @@ <h4 id="-redraw-">.redraw()</h4>
243243< p > Calling redraw will cause the chart to re-render delta in data change incrementally. If there is no change in the
244244underlying data dimension then calling this method will have no effect on the chart. Most of the chart interaction in
245245dc library will automatically trigger this method through its internal event engine, therefore you only need to manually
246- invoke this function if data is manipulated outside of dc’ s control; for example if data is loaded on a periodic basis
246+ invoke this function if data is manipulated outside of dc' s control; for example if data is loaded on a periodic basis
247247in the background using crossfilter.add().</ p >
248248< h4 id ="-hasfilter-filter- "> .hasFilter([filter])</ h4 >
249249< p > Check whether is any active filter or a specific filter is associated with particular chart instance.
@@ -256,7 +256,7 @@ <h4 id="-filter-filtervalue-">.filter([filterValue])</h4>
256256chart< span class ="variable "> .filter</ span > (< span class ="number "> 18</ span > );</ code > </ pre >
257257< h4 id ="-filters- "> .filters()</ h4 >
258258< p > Return all current filters. This method does not perform defensive cloning of the internal filter array before returning
259- therefore any modification of returned array will affact chart’ s internal filter storage.</ p >
259+ therefore any modification of returned array will affact chart' s internal filter storage.</ p >
260260< h4 id ="-filterhandler-function- "> .filterHandler([function])</ h4 >
261261< p > Set or get filter handler. Filter handler is a function that performs the filter action on a specific dimension. Using
262262custom filter handler give you the flexibility to perform additional logic before or after filtering.</ p >
@@ -338,17 +338,17 @@ <h4 id="-legend-dc-legend-">.legend([dc.legend])</h4>
338338< pre > < code class ="lang-js "> chart< span class ="variable "> .legend</ span > (dc< span class ="variable "> .legend</ span > ()< span class ="variable "> .x</ span > (< span class ="number "> 400</ span > )< span class ="variable "> .y</ span > (< span class ="number "> 10</ span > )< span class ="variable "> .itemHeight</ span > (< span class ="number "> 13</ span > )< span class ="variable "> .gap</ span > (< span class ="number "> 5</ span > ))</ code > </ pre >
339339< h2 id ="-a-name-listeners-href-listeners-a-listeners "> < a name ="listeners " href ="#listeners "> #</ a > Listeners</ h2 >
340340< p > All dc chart instance supports the following listeners.</ p >
341- < h4 id ="-on-prerender-function-chart- "> .on(“ preRender” , function(chart){… })</ h4 >
341+ < h4 id ="-on-prerender-function-chart- "> .on(" preRender" , function(chart){... })</ h4 >
342342< p > This listener function will be invoked before chart rendering.</ p >
343- < h4 id ="-on-postrender-function-chart- "> .on(“ postRender” , function(chart){… })</ h4 >
344- < p > This listener function will be invoked after chart finish rendering including all renderlets’ logic.</ p >
345- < h4 id ="-on-preredraw-function-chart- "> .on(“ preRedraw” , function(chart){… })</ h4 >
343+ < h4 id ="-on-postrender-function-chart- "> .on(" postRender" , function(chart){... })</ h4 >
344+ < p > This listener function will be invoked after chart finish rendering including all renderlets' logic.</ p >
345+ < h4 id ="-on-preredraw-function-chart- "> .on(" preRedraw" , function(chart){... })</ h4 >
346346< p > This listener function will be invoked before chart redrawing.</ p >
347- < h4 id ="-on-postredraw-function-chart- "> .on(“ postRedraw” , function(chart){… })</ h4 >
348- < p > This listener function will be invoked after chart finish redrawing including all renderlets’ logic.</ p >
349- < h4 id ="-on-filtered-function-chart-filter- "> .on(“ filtered” , function(chart, filter){… })</ h4 >
347+ < h4 id ="-on-postredraw-function-chart- "> .on(" postRedraw" , function(chart){... })</ h4 >
348+ < p > This listener function will be invoked after chart finish redrawing including all renderlets' logic.</ p >
349+ < h4 id ="-on-filtered-function-chart-filter- "> .on(" filtered" , function(chart, filter){... })</ h4 >
350350< p > This listener function will be invoked after a filter is applied, added or removed.</ p >
351- < h4 id ="-on-zoomed-function-chart-filter- "> .on(“ zoomed” , function(chart, filter){… })</ h4 >
351+ < h4 id ="-on-zoomed-function-chart-filter- "> .on(" zoomed" , function(chart, filter){... })</ h4 >
352352< p > This listener function will be invoked after a zoom is triggered.</ p >
353353< h2 id ="-a-name-marginable-href-marginable-a-marginable "> < a name ="marginable " href ="#marginable "> #</ a > Marginable</ h2 >
354354< p > Marginable is a mixin that provides margin utility functions for both the Row Chart and Coordinate Grid Charts.</ p >
@@ -426,7 +426,7 @@ <h4 id="-xaxispadding-padding-">.xAxisPadding([padding])</h4>
426426< p > Set or get x axis padding when elastic x axis is turned on. The padding will be added to both end of the x axis if and
427427only if elasticX is turned on otherwise it will be simply ignored.</ p >
428428< ul >
429- < li > padding - could be integer or percentage in string (e.g. “ 10%” ). Padding can be applied to number or date.
429+ < li > padding - could be integer or percentage in string (e.g. " 10%" ). Padding can be applied to number or date.
430430When padding with date, integer represents number of days being padded while percentage string will be treated
431431as number.</ li >
432432</ ul >
@@ -453,7 +453,7 @@ <h4 id="-yaxispadding-padding-">.yAxisPadding([padding])</h4>
453453< p > Set or get y axis padding when elastic y axis is turned on. The padding will be added to the top of the y axis if and only
454454if elasticY is turned on otherwise it will be simply ignored.</ p >
455455< ul >
456- < li > padding - could be integer or percentage in string (e.g. “ 10%” ). Padding can be applied to number or date.
456+ < li > padding - could be integer or percentage in string (e.g. " 10%" ). Padding can be applied to number or date.
457457When padding with date, integer represents number of days being padded while percentage string will be treated
458458as number.</ li >
459459</ ul >
@@ -471,7 +471,7 @@ <h4 id="-brushon-boolean-">.brushOn([boolean])</h4>
471471< p > Turn on/off the brush based in-place range filter. When the brush is on then user will be able to simply drag the mouse
472472across the chart to perform range filtering based on the extend of the brush. However turning on brush filter will essentially
473473disable other interactive elements on the chart such as the highlighting, tool-tip, and reference lines on a chart. Default
474- value is “ true” .</ p >
474+ value is " true" .</ p >
475475< h4 id ="-focus-range- "> .focus([range])</ h4 >
476476< p > Zoom this chart to focus on the given range. The given range should be an array containing only 2 element([start, end]) defining an range in x domain. If the range is not given or set to null, then the zoom will be reset. < em > For focus to work elasticX has to be turned off otherwise focus will be ignored.</ em > </ p >
477477< pre > < code class ="lang-js "> chart.renderlet(function(chart){
@@ -528,13 +528,13 @@ <h4 id="-stack-group-name-retriever-">.stack(group[, name, retriever])</h4>
528528< h2 id ="-a-name-abstract-bubble-chart-href-abstract-bubble-chart-a-abstract-bubble-chart-abstract-color-chart-color-chart- "> < a name ="abstract-bubble-chart " href ="#abstract-bubble-chart "> #</ a > Abstract Bubble Chart [Abstract] < < a href ="#color-chart "> Color Chart</ a > </ h2 >
529529< p > An abstraction provides reusable functionalities for any chart that needs to visualize data using bubbles.</ p >
530530< h4 id ="-r-bubbleradiusscale- "> .r([bubbleRadiusScale])</ h4 >
531- < p > Get or set bubble radius scale. By default bubble chart uses < code > d3.scale.linear().domain([0, 100])</ code > as it’ s r scale .</ p >
531+ < p > Get or set bubble radius scale. By default bubble chart uses < code > d3.scale.linear().domain([0, 100])</ code > as it' s r scale .</ p >
532532< h4 id ="-radiusvalueaccessor-radiusvalueaccessor- "> .radiusValueAccessor([radiusValueAccessor])</ h4 >
533533< p > Get or set the radius value accessor function. The radius value accessor function if set will be used to retrieve data value
534534for each and every bubble rendered. The data retrieved then will be mapped using r scale to be used as the actual bubble
535535radius. In other words, this allows you to encode a data dimension using bubble size.</ p >
536536< h4 id ="-minradiuswithlabel-radius- "> .minRadiusWithLabel([radius])</ h4 >
537- < p > Get or set the minimum radius for label rendering. If a bubble’ s radius is less than this value then no label will be rendered.
537+ < p > Get or set the minimum radius for label rendering. If a bubble' s radius is less than this value then no label will be rendered.
538538Default value: 10.</ p >
539539< h4 id ="-maxbubblerelativesize-relativesize- "> .maxBubbleRelativeSize([relativeSize])</ h4 >
540540< p > Get or set the maximum relative size of a bubble to the length of x axis. This value is useful when the radius differences among
@@ -643,8 +643,8 @@ <h2 id="-a-name-data-count-href-data-count-a-data-count-widget-concrete-base-cha
643643by the current filters. Once created data count widget will automatically update the text content of the following elements
644644under the parent element.</ p >
645645< ul >
646- < li > “ .total-count” - total number of records</ li >
647- < li > “ .filter-count” - number of records matched by the current filters</ li >
646+ < li > " .total-count" - total number of records</ li >
647+ < li > " .filter-count" - number of records matched by the current filters</ li >
648648</ ul >
649649< p > Examples:</ p >
650650< ul >
@@ -826,7 +826,7 @@ <h4 id="-overlaygeojson-json-name-keyaccessor-mandatory-">.overlayGeoJson(json,
826826< ul >
827827< li > json - GeoJson feed</ li >
828828< li > name - name of the layer</ li >
829- < li > keyAccessor - accessor function used to extract “ key” from the GeoJson data. Key extracted by this function should match
829+ < li > keyAccessor - accessor function used to extract " key" from the GeoJson data. Key extracted by this function should match
830830the keys generated in crossfilter groups.</ li >
831831</ ul >
832832< pre > < code class ="lang-js "> < span class ="comment "> // insert a layer for rendering US states</ span >
@@ -837,8 +837,8 @@ <h4 id="-projection-projection-">.projection(projection)</h4>
837837< p > Set custom geo projection function. Available < a href ="https://github.com/mbostock/d3/wiki/Geo-Projections "> d3 geo projection functions</ a > .
838838Default value: albersUsa.</ p >
839839< h4 id ="-geojsons- "> .geoJsons()</ h4 >
840- < p > Return all GeoJson layers currently registered with thit chart. The returned array is a reference to this chart’ s internal
841- registration data structure without copying thus any modification to this array will also modify this chart’ s internal
840+ < p > Return all GeoJson layers currently registered with thit chart. The returned array is a reference to this chart' s internal
841+ registration data structure without copying thus any modification to this array will also modify this chart' s internal
842842registration.</ p >
843843< p > Return:
844844An array of objects containing fields {name, data, accessor}</ p >
@@ -848,7 +848,7 @@ <h4 id="-removegeojson-name-">.removeGeoJson(name)</h4>
848848< h2 id ="-a-name-bubble-overlay-chart-href-bubble-overlay-chart-a-bubble-overlay-chart-concrete-abstract-bubble-chart-abstract-bubble-chart-base-chart-base-chart- "> < a name ="bubble-overlay-chart " href ="#bubble-overlay-chart "> #</ a > Bubble Overlay Chart [Concrete] < < a href ="#abstract-bubble-chart "> Abstract Bubble Chart</ a > < < a href ="#base-chart "> Base Chart</ a > </ h2 >
849849< p > Bubble overlay chart is quite different from the typical bubble chart. With bubble overlay chart you can arbitrarily place
850850a finite number of bubbles on an existing svg or bitmap image (overlay on top of it), thus losing the typical x and y
851- positioning that we are used to whiling retaining the capability to visualize data using it’ s bubble radius and
851+ positioning that we are used to whiling retaining the capability to visualize data using it' s bubble radius and
852852coloring.</ p >
853853< p > Examples:</ p >
854854< ul >
@@ -877,7 +877,7 @@ <h4 id="-svg-imageelement-mandatory-">.svg(imageElement) - <strong>mandatory</st
877877< pre > < code class ="lang-js "> // < span class ="keyword "> set</ span > up underlying svg element
878878chart< span class ="preprocessor "> .svg</ span > (d3< span class ="preprocessor "> .select</ span > (< span class ="string "> "#chart svg"</ span > ))< span class ="comment "> ;</ span > </ code > </ pre >
879879< h4 id ="-point-name-x-y-mandatory- "> .point(name, x, y) - < strong > mandatory</ strong > </ h4 >
880- < p > Set up a data point on the overlay. The name of a data point should match a specific “ key” among data groups generated using keyAccessor.
880+ < p > Set up a data point on the overlay. The name of a data point should match a specific " key" among data groups generated using keyAccessor.
881881If a match is found (point name <-> data group key) then a bubble will be automatically generated at the position specified by the
882882function. x and y value specified here are relative to the underlying svg.</ p >
883883< h2 id ="-a-name-row-chart-href-row-chart-a-row-chart-concrete-color-chart-color-chart-base-chart-base-chart- "> < a name ="row-chart " href ="#row-chart "> #</ a > Row Chart [Concrete] < < a href ="#color-chart "> Color Chart</ a > < < a href ="#base-chart "> Base Chart</ a > </ h2 >
0 commit comments