数据可视化工具 dc.js 入门指南

DC.JS入门和使用指南

CREATE CHART OBJECTS | 创建图表对象
Create chart objects associated with the container elements identified by the css selector. Note: It is often a good idea to have these objects accessible at the global scope so that they can be modified or filtered by other page controls. |创建可以被CSS选择器识别的图表元素以及相应的容器元素。注意他们通常都是全局变量，这样他们就可以被其他的页面控制器来修改和调用了。

var gainOrLossChart = dc.pieChart('#gain-loss-chart');
var fluctuationChart = dc.barChart('#fluctuation-chart');
var quarterChart = dc.pieChart('#quarter-chart');
var dayOfWeekChart = dc.rowChart('#day-of-week-chart');
var moveChart = dc.lineChart('#monthly-move-chart');
var volumeChart = dc.barChart('#monthly-volume-chart');
var yearlyBubbleChart = dc.bubbleChart('#yearly-bubble-chart');
var nasdaqCount = dc.dataCount('.dc-data-count');
var nasdaqTable = dc.dataTable('.dc-data-table');

ANCHOR DIV FOR CHARTS | 锚定图表的DIV
A div anchor that can be identified by id | 你可以使用id来定位你的div

   <div id='your-chart'></div>  //
   <div id='chart'><span>Days by Gain or Loss</span></div> //

.TURNONCONTROLS() | 开启控制
If a link with css class reset is present then the chart will automatically hide/show it based on whether there is a filter set on the chart (e.g. slice selection for pie chart and brush selection for bar chart). Enable this with chart.turnOnControls(true) | 如果一个链接有reset属性，那么图表将自动显示/隐藏这个基于是否有一个过滤器被设置在这个图表上（如饼图的切片 或者 条形图的刷选），使用 chart.turnOnControls(true) 开启这个功能。

  <div id='chart'>
       <a class='reset' //reset class
          href='javascript:myChart.filterAll();dc.redrawAll();'
          style='visibility: hidden;'>reset</a>
    </div>
    //这里使用的是dc.js大于2.1的版本 使用的是**visibility: hidden;**

dc.js >=2.1 uses visibility: hidden to hide/show controls without disrupting the layout. To return the old display: none behavior, set chart.controlsUseVisibility(false) and use that style instead.
在大于等于2.1的版本中，我们使用visibility:hidden 来控制是否显示， 这将不会与已知的布局相冲突。如果你想使用旧版本的display: none 来控制行为，则首先使用chart.controlsUseVisibility(false) 来让旧版本的方法生效
dc.js will also automatically inject the current filter value into any html element with its css class set to filter
dc.js 将自动的将当前的过滤器中的数据插入任何一个具有filter类的html元素

<div id='chart'>
        <span class='reset' style='visibility: hidden;'>
          Current filter: <span class='filter'></span>
        </span>
    </div>

LOAD YOUR DATA | 加载你的数据
Data can be loaded through regular means with your favorite javascript library 数据可以通过各种你喜欢的js库来加载

“`
d3.csv(‘data.csv’, function(data) {…};
d3.json(‘data.json’, function(data) {…};
jQuery.getJson(‘data.json’, function(data){…});

>Since its a csv file we need to format the data a bit.  如果是一个csv数据，我们需要对此做一点处理

>
d3.csv('ndx.csv', function (data) {
    var dateFormat = d3.time.format('%m/%d/%Y');
        var numberFormat = d3.format('.2f');

        data.forEach(function (d) {
            d.dd = dateFormat.parse(d.date);
            d.month = d3.time.month(d.dd); // pre-calculate month for better performance
            d.close = +d.close; // coerce to number
            d.open = +d.open;
        });

CREATE CROSSFILTER DIMENSIONS AND GROUPS

Dimension by year

var ndx = crossfilter(data);
var all = ndx.groupAll();

var yearlyDimension = ndx.dimension(function (d) {
    return d3.time.year(d.dd).getFullYear();
});
var yearlyPerformanceGroup = yearlyDimension.group().reduce(
/* callback for when data is added to the current filter results */
function (p, v) {
    ++p.count;
    p.absGain += v.close - v.open;
    p.fluctuation += Math.abs(v.close - v.open);
    p.sumIndex += (v.open + v.close) / 2;
    p.avgIndex = p.sumIndex / p.count;
    p.percentageGain = p.avgIndex ? (p.absGain / p.avgIndex) * 100 : 0;
    p.fluctuationPercentage = p.avgIndex ? (p.fluctuation / p.avgIndex) * 100 : 0;
    return p;
},
/* callback for when data is removed from the current filter results */
function (p, v) {
    --p.count;
    p.absGain -= v.close - v.open;
    p.fluctuation -= Math.abs(v.close - v.open);
    p.sumIndex -= (v.open + v.close) / 2;
    p.avgIndex = p.count ? p.sumIndex / p.count : 0;
    p.percentageGain = p.avgIndex ? (p.absGain / p.avgIndex) * 100 : 0;
    p.fluctuationPercentage = p.avgIndex ? (p.fluctuation / p.avgIndex) * 100 : 0;
    return p;
},
/* initialize p */
function () {
    return {
        count: 0,
        absGain: 0,
        fluctuation: 0,
        fluctuationPercentage: 0,
        sumIndex: 0,
        avgIndex: 0,
        percentageGain: 0
    };
}
);

Dimension by full date

    var dateDimension = ndx.dimension(function (d) {
        return d.dd;
    });

Dimension by month

var moveMonths = ndx.dimension(function (d) {
        return d.month;
    });

Group by total movement within month

  var monthlyMoveGroup = moveMonths.group().reduceSum(function (d) {
        return Math.abs(d.close - d.open);
    });

Group by total volume within move, and scale down result

  var volumeByMonthGroup = moveMonths.group().reduceSum(function (d) {
        return d.volume / 500000;
    });
    var indexAvgByMonthGroup = moveMonths.group().reduce(
        function (p, v) {
            ++p.days;
            p.total += (v.open + v.close) / 2;
            p.avg = Math.round(p.total / p.days);
            return p;
        },
        function (p, v) {
            --p.days;
            p.total -= (v.open + v.close) / 2;
            p.avg = p.days ? Math.round(p.total / p.days) : 0;
            return p;
        },
        function () {
            return {days: 0, total: 0, avg: 0};
        }
    );