让旧的 dc.js fiddle 重新工作
Getting an old dc.js fiddle working again
当时创建的 jsFiddle 运行良好https://jsfiddle.net/dani2011/jydbqjgm/9/. It seems to be corrupted due to a problem with the resource file https://dc-js.github.io/dc.js/js/colorbrewer.js giving a 404 error. Replaced the corrupted version with https://cdn.jsdelivr.net/npm/colorbrewer@1.0.0/colorbrewer.js. In addition, updated all the other resource files with recent versions from https://cdnjs.com/libraries/。此外，由于 fiddle 本身托管在 https 上，因此称为 https。这是一些代码：
'use strict';
//#### Chart objects
var bitChart = dc.compositeChart("#bitrate-move-chart");//Before dynamic Y-Axis nonzero_min used var bitChart = dc.lineChart('#bitrate-move-chart');
var bitChart2 = dc.compositeChart("#bitrate-move-chart2");//Before dynamic Y-Axis nonzero_min used var bitChart = dc.lineChart('#bitrate-move-chart');
var timeSlider = dc.barChart('#bitrate-timeSlider-chart');
var bitCount = dc.dataCount('.dc-data-count');
var bitrateTable = dc.dataTable('.dc-data-table');
//#### Creating dynamic Y axis with min/max ticks' values depending on min/max of data - copied from http://jsfiddle.net/gordonwoodhull/7anae5c5/1/
function nonzero_min(chart) {
dc.override(chart, 'yAxisMin', function () {
var min = d3.min(chart.data(), function (layer) {
return d3.min(layer.values, function (p) {
return p.y + p.y0;
});
});
return dc.utils.subtract(min, chart.yAxisPadding());
});
return chart;
}
//#### 15 Min Interval - copied from https://github.com/mbostock/d3/blob/master/src/time/interval.js
var d3_date = Date;
function d3_time_interval(local, step, number) {
function round(date) {
var d0 = local(date), d1 = offset(d0, 1);
return date - d0 < d1 - date ? d0 : d1;
}
function ceil(date) {
step(date = local(new d3_date(date - 1)), 1);
return date;
}
function offset(date, k) {
step(date = new d3_date(+date), k);
return date;
}
function range(t0, t1, dt) {
var time = ceil(t0), times = [];
if (dt > 1) {
while (time < t1) {
if (!(number(time) % dt)) times.push(new Date(+time));
step(time, 1);
}
} else {
while (time < t1) times.push(new Date(+time)), step(time, 1);
}
return times;
}
function range_utc(t0, t1, dt) {
try {
d3_date = d3_date_utc;
var utc = new d3_date_utc();
utc._ = t0;
return range(utc, t1, dt);
} finally {
d3_date = Date;
}
}
local.floor = local;
local.round = round;
local.ceil = ceil;
local.offset = offset;
local.range = range;
var utc = local.utc = d3_time_interval_utc(local);
utc.floor = utc;
utc.round = d3_time_interval_utc(round);
utc.ceil = d3_time_interval_utc(ceil);
utc.offset = d3_time_interval_utc(offset);
utc.range = range_utc;
return local;
}
function d3_time_interval_utc(method) {
return function (date, k) {
try {
d3_date = d3_date_utc;
var utc = new d3_date_utc();
utc._ = date;
return method(utc, k)._;
} finally {
d3_date = Date;
}
};
}
//#### Generalization of d3.time.minute copied from- https://github.com/mbostock/d3/blob/master/src/time/minute.js
function n_minutes_interval(nmins) {
var denom = 6e4 * nmins;
return d3_time_interval(function (date) {
return new d3_date(Math.floor(date / denom) * denom);
}, function (date, offset) {
date.setTime(date.getTime() + Math.floor(offset) * denom); // DST breaks setMinutes
}, function (date) {
return date.getMinutes();
});
}
//bitChart
var min15 = n_minutes_interval(15);
//bitChart2
var min15_2 = n_minutes_interval(15);
//timeslider
var min15_3 = n_minutes_interval(15);
//### Load data
var data = d3.csv.parse(d3.select("pre#anotherdata").text());
//d3.csv('CHANNEL_CLUSTER_BITRATE_takeThis.csv', function (data) {
// Format CSV data
var dateFormat = d3.time.format('%Y/%m/%d/%H:%M');
var numberFormat = d3.format('.2');
data.forEach(function (d) {
d.bitdate = new Date(d.DATETIME); //d.DATETIME = dateFormat.parse(d.DATETIME);
d.BITRATE = +d.BITRATE.match(/\d+/); //d.BITRATE = +d.BITRATE;
});
//### Crossfilter Dimensions
var crossFilteredData = crossfilter(data);
var all = crossFilteredData.groupAll();
// Dimension by full date
//bitChart
var dateDimension = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//bitChart2
var dateDimension2 = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//timeSlider
var dateDimension3 = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//dropDown
var filterDimension = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//### Crossfiltered Groups
//timeSlider group
var minIntervalWeekBitrateGroup3 = dateDimension3.group(min15_3).reduceSum(function (d) {
return 10 //+d.BITRATE
});
//bitChart group-Group bitrate per week, 15 minInterval - maintain running tallies
var bitrateWeekMinIntervalGroupMove = dateDimension.group(min15).reduce(
/* callback for when data is added to the current filter results */
function (p, v) {
++p.count;
p.BITRATE = +v.BITRATE;
p.total += +v.BITRATE;
p.avg = p.count ? Math.round(p.total / p.count) : 0;
return p;
},
/* callback for when data is removed from the current filter results */
function (p, v) {
--p.count;
p.BITRATE = +v.BITRATE;
p.total -= +v.BITRATE;
p.avg = p.count ? Math.round(p.total / p.count) : 0;
return p;
},
/* initialize p */
function () {
return {
count: 0,
bitrate: 0,
total: 0,
avg: 0
};
}
);
//bitChart2 group
var bitrateWeekMinIntervalGroupMove2 = dateDimension2.group(min15_2).reduce(
/* callback for when data is added to the current filter results */
function (p, v) {
++p.count;
p.BITRATE = +v.BITRATE;
p.total += +v.BITRATE;
p.avg = p.count ? Math.round(p.total / p.count) : 0;
return p;
},
/* callback for when data is removed from the current filter results */
function (p, v) {
--p.count;
p.BITRATE = +v.BITRATE;
p.total -= +v.BITRATE;
p.avg = p.count ? Math.round(p.total / p.count) : 0;
return p;
},
/* initialize p */
function () {
return {
count: 0,
bitrate: 0,
total: 0,
avg: 0
};
}
);
//### Domain limits
var minDate = dateDimension.bottom(1)[0].DATETIME;// alert(minDate);
var maxDate = dateDimension.top(1)[0].DATETIME;// alert(maxDate);
//domain limits for brush
var start = moment(new Date(minDate));
var end = moment(new Date(maxDate));
var tmp;
//max line
var maxbit = d3.max(data, function (d) { return +d["BITRATE"]; }); //alert(maxbit);
var graphSpan;
function addHours(amountHours) {
graphSpan = amountHours;
timeSlider.replaceFilter(dc.filters.RangedFilter(start, moment(start).add(amountHours, 'hours')));
dc.redrawAll();
}
//dropdown copied from <!--http://jsfiddle.net/gordonwoodhull/ewmrmu83/9/-->
d3.select('#hoursDropDown').on('change', function() {
addHours(this.value);
});
//###Graphs//bitChart
bitChart /* dc.lineChart('#bitrate-move-chart', 'chartGroup') */
.xUnits(min15.range) //.xUnits(d3.time.weeks)//.round(d3.time.week) //.round(d3.time.minute)//d3.time.month.round)
.x(d3.time.scale().domain([new Date(minDate), new Date(maxDate)]))
.yAxisPadding('5%')
.elasticY(true)
//Specify a "range chart" to link its brush extent with the zoom of the current "focus chart".
.rangeChart(timeSlider)
.width(450)
.height(200)
.transitionDuration(500)
.margins({ top: 30, right: 50, bottom: 100, left: 50, padding: 1 })
.mouseZoomable(true)
.brushOn(false)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
//Render max bitrate horizontal line copied from bar-extra-line.html
.yAxisLabel("Total Bitrate per 15 minutes")
.renderlet(function (chart) {
chart.svg().selectAll('.chart-body').attr('clip-path', null)
chart.selectAll('g.x text')
.attr('transform', 'translate(-10,10) rotate(315)');
})
.on('renderlet', function (chart) {
var left_y = 10, right_y = 70; // use real statistics here!
var extra_data = [{ x: chart.x().range()[0], y: chart.y()(left_y) }, { x: chart.x().range()[1], y: chart.y()(right_y) }];
var line = d3.svg.line()
.x(function (d) { return d.x; })// console.log("d.x " + d.x);
.y(function (d) { return maxbit; })
.interpolate('linear');
var chartBody = chart.select('g.chart-body');
var path = chartBody.selectAll('path.extra').data([extra_data]);
path.enter().append('path').attr({
class: 'extra',
stroke: 'red',
id: 'extra-line'
});
path.attr('d', line);
// Label the max line
var text = chartBody.selectAll('text.extra-label').data([0]);
text.enter().append('text')
.attr('text-anchor', 'middle')
.append('textPath').attr({
class: 'extra-label',
'xlink:href': '#extra-line',
startOffset: '50%'
})
.text('Total Bitrate Max Value');
})
// .ordinalColors('red')
// Title can be called by any stack layer.
.title(function (d) {
var value = d.value.total ? d.value.total : d.value;
if (isNaN(value)) {
value = 0;
}
// console.log("dateFormat(d.key) " + dateFormat(d.key));
return dateFormat(d.key) + ' \n Total Bit:' + numberFormat(value)
})
//Creating dynamic Y axis with min max ticks' values depending on min max of data - copied from http://jsfiddle.net/gordonwoodhull/7anae5c5/1/
.compose([
nonzero_min(dc.lineChart(bitChart)
.dimension(min15)
.colors('blue')
.group(bitrateWeekMinIntervalGroupMove, 'Bitrate Total')
.valueAccessor(function (d) {
return d.value.total;
})
// .dashStyle([2,2])
.interpolate('step-after')
.renderArea(false)
.brushOn(false)
.renderDataPoints(false)
.clipPadding(10)),
])
bitChart.render();
//bitChart2
bitChart2 /* dc.lineChart('#bitrate-move-chart', 'chartGroup') */
.xUnits(min15_2.range) //.xUnits(d3.time.weeks)//.round(d3.time.week) //.round(d3.time.minute)//d3.time.month.round)
.x(d3.time.scale().domain([new Date(minDate), new Date(maxDate)]))
.yAxisPadding('5%')
.elasticY(true)
//Specify a "range chart" to link its brush extent with the zoom of the current "focus chart".
.rangeChart(timeSlider)
.width(450)
.height(200)
.transitionDuration(500)
.margins({ top: 30, right: 50, bottom: 100, left: 50, padding: 1 })
.mouseZoomable(true)
.brushOn(false)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
//Render max bitrate horizontal line copied from bar-extra-line.html
.yAxisLabel("Total Bitrate per 15 minutes")
.renderlet(function (chart) {
chart.svg().selectAll('.chart-body').attr('clip-path', null)
chart.selectAll('g.x text')
.attr('transform', 'translate(-10,10) rotate(315)');
})
.on('renderlet', function (chart) {
var left_y = 10, right_y = 70; // use real statistics here!
var extra_data = [{ x: chart.x().range()[0], y: chart.y()(left_y) }, { x: chart.x().range()[1], y: chart.y()(right_y) }];
var line = d3.svg.line()
.x(function (d) { return d.x; })
.y(function (d) { return maxbit; })
.interpolate('linear');
var chartBody = chart.select('g.chart-body');
var path = chartBody.selectAll('path.extra').data([extra_data]);
path.enter().append('path').attr({
class: 'extra',
stroke: 'red',
id: 'extra-line'
});
path.attr('d', line);
// Label the max line
var text = chartBody.selectAll('text.extra-label').data([0]);
text.enter().append('text')
.attr('text-anchor', 'middle')
.append('textPath').attr({
class: 'extra-label',
'xlink:href': '#extra-line',
startOffset: '50%'
})
.text('Total Bitrate Max Value');
})
// .ordinalColors('red')
// Title can be called by any stack layer.
.title(function (d) {
var value = d.value.total ? d.value.total : d.value;
if (isNaN(value)) {
value = 0;
}
return dateFormat(d.key) + ' \n Total Bit:' + numberFormat(value)
})
//Creating dynamic Y axis with min max ticks' values depending on min max of data - copied from http://jsfiddle.net/gordonwoodhull/7anae5c5/1/
.compose([
nonzero_min(dc.lineChart(bitChart2)
.dimension(min15_2)
.colors('blue')
.group(bitrateWeekMinIntervalGroupMove2, 'Bitrate Total')
.valueAccessor(function (d) {
return d.value.total;
})
//.dashStyle([2,2])
.interpolate('step-after')
.renderArea(false)
.brushOn(false)
.renderDataPoints(false)
.clipPadding(10)),
])
bitChart2.render();
//Range Chart - timeSlider
// Since this bar chart is specified as "range chart" for the line chart, its brush extent will always match the zoom of the line chart.
timeSlider
.dimension(dateDimension3)//.dimension(min15)
.group(minIntervalWeekBitrateGroup3)
//.x(d3.time.scale().range([0, brushContainer.select("rect").attr("width")]).domain([new Date(dateDimension3.bottom(1)[0].DATETIME), new Date(dateDimension3.top(1)[0].DATETIME)]))
.x(d3.time.scale().domain([new Date(dateDimension3.bottom(1)[0].DATETIME), new Date(dateDimension3.top(1)[0].DATETIME)]))
.round(dc.round.floor) //(d3.time.month.round)
.xUnits(min15_3.range)//.xUnits(d3.time.week) //.xUnits(d3.time.minute) //.xUnits(d3.time.months)
.width(990) /* dc.barChart('#bitrate-timeSlider-chart', 'chartGroup'); */
.height(40)
.margins({ top: 0, right: 50, bottom: 20, left: 40 })
// .centerBar(true)
.gap(1)
.mouseZoomable(true)
.on('filtered',function (chart){
console.log("filtered");
})
.on('preRedraw',function (chart)
{
console.log("filtered");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('renderlet', function (chart) {
console.log("renderlet myjs");
var brushg = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush");
var resizeg = brushg.selectAll("g.resize").selectAll("*").data(data[0]);
var timesliderSVG3 = resizeg.exit().remove();
//////stop brush events
// var brush = d3.svg.brush()
// brush.on("brushstart", null).on("brush", null).on("brushend", null).on("touchmove.brush", null).on("touchend.brush", null).on("mousemove.brush", null).on("mouseup.brush", null);
// brushg.call(brush)
// brushg.on("brushstart", d3.event.stopPropagation()).on("brush", d3.event.stopPropagation()).on("brushend", d3.event.stopPropagation()).on("touchmove.brush", null).on("touchend.brush", d3.event.stopPropagation()).on("mousemove.brush", d3.event.stopPropagation()).on("mouseup.brush", d3.event.stopPropagation());
//disable resize(not working)
// var brush = d3.svg.brush()
//// brush.on("brushstart", null).on("brush", null).on("brushend", null).on("touchmove.brush", null).on("touchend.brush", null).on("mousemove.brush", null).on("mouseup.brush", null);
// var brush1 = brush.on("brush", brushed);
// function brushed() {
// size = extent[1] - extent[0],
// domain = x.domain(),
// x0 = domain[0] ,
// x1 = domain[1] ;
// brush.extent(x0, x1);
// var timesliderSVG4 = brushg.on("brushstart", function () { resizeg.exit().remove() }).on("brush", function () { resizeg.exit().remove() }).on("brushend", function () {resizeg.exit().remove() })
// var timesliderSVG6 = resizeg.style("display", "none");
})
.on('pretransition', function (chart) {
console.log("filtered myjs");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('postRender', function (chart) {
console.log("postRender myjs");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('preRender', function (chart) {
console.log("preRender myjs");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('postRedraw', function (chart) {
console.log("postRedraw myjs");
timeSlider.extendBrush = function() {
var extent = timeSlider.brush().extent();
if(graphSpan) {
extent[1] = moment(extent[0]).add(graphSpan, 'hours');
timeSlider.brush().extent(extent);
}
return extent;
}
//////code from http://bl.ocks.org/mbostock/6498000
//var brush = d3.svg.brush()
//brush.on("brush", brushmove);
//brushg.call(brush);
//brushg.selectAll("rect.background")
//.on("mousedown.brush", brushcenter)
//.on("touchstart.brush", brushcenter);
//brushg.call(brush.event);
//function brushmove() {
// var extent = brush.extent();
// return extent[1] - extent[0];
// var extra_data = [{ x: chart.x().range()[0] }, { x: chart.x().range()[1] }];
// // dot.classed("selected", function (d) { return extent[0] <= d && d <= extent[1]; });
//}
//function brushcenter() {
// var self = d3.select(window),
// target = d3.event.target,
// extent = brush.extent(),
// size = extent[1] - extent[0],
// domain = x.domain(),
// x0 = domain[0] + size / 2,
// x1 = domain[1] - size / 2;
// recenter(true);
// brushmove();
// if (d3.event.changedTouches) {
// self.on("touchmove.brush", brushmove).on("touchend.brush", brushend);
// } else {
// self.on("mousemove.brush", brushmove).on("mouseup.brush", brushend);
// }
// function brushmove() {
// d3.event.stopPropagation();
// center = Math.max(x0, Math.min(x1, x.invert(d3.mouse(target)[0])));
// recenter(false);
// }
// function brushend() {
// brushmove();
// self.on(".brush", null);
// }
//}
//function recenter(smooth) {
// if (centering) return; // timer is active and already tweening
// if (!smooth) return void tween(1); // instantaneous jump
// centering = true;
// function tween(alpha) {
// var extent = brush.extent(),
// size = extent[1] - extent[0],
// center1 = center * alpha + (extent[0] + extent[1]) / 2 * (1 - alpha);
// brushg
// .call(brush.extent([center1 - size / 2, center1 + size / 2]))
// .call(brush.event);
// return !(centering = Math.abs(center1 - center) > 1e-3);
// }
// d3.timer(function () {
// return tween(alpha);
// });
//}
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('zoomed', function (chart) {
console.log("zoomed myjs");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
//var timesliderSVG2 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize path").data(data[0]).exit().remove();
//var chartBrush = timeSlider.select('g.brush');
//var resizeE = chartBrush.select('resize e');//.data([extra_data]);
//resizeE.select("rect").remove();
//resizeE.select("path").remove();
// onbrush();
//function onbrush(chart) {
// //console.log(d3.event)
// //var chartBrush = timeSlider.select('g.brush');
// //var resizeE = chartBrush.select('resize e');//.data([extra_data]);
// //resizeE.select("rect").remove();
// //resizeE.select("path").remove();
// //if (chart.brush().event.type === "brush" && chart.brush().event.mode === "resize") {
// // var currentExtent = brush.extent();
// // console.log("currentExtent: " + currentExtent);
// // var side = (+currentExtent[0] !== +startExtent[0]) ? "left" : "right";
// // console.log(side);
// //}
//}
// var timesliderSVG4 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("rect.handle").data(data[0]).exit().remove();
// var timesliderSVG5 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("rect.background").selectAll("*").data(data[0]).exit().remove();
// var svg6 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").data([{ type: "w" }, { type: "e" }]).selectAll("path").exit().remove();
// var extra_data = [{ x: chart.x().range()[0] }, { x: chart.x().range()[1] }];
// console.log("preRender");
// var brushExtent = chart.brush().extent();
// d3.select("#bitrate-timeSlider-chart").selectAll("g.resize").style("visibility","hidden");
// var timesliderSVG = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").remove();
// var anotherTimeSliderSVG = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").data(data[0]).exit().remove();
// var timesliderSVG2 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize path").data(data[0]).exit().remove();
// var justRemove = d3.selectAll("g.resize").remove();
// var brushSVG = d3.select("g.brush").selectAll("g.resize").data([extra_data]).exit().remove();
// d3.select("g.parent").selectAll("*").remove();
// timesliderSVG.svg.selectAll("g.resize e").remove();
// timesliderSVG.selectAll(".g.resize e").data([]).exit().remove()
// timesliderSVG.select("svg").select("g").select("g.brush").select("g.resize e").enter().remove("g.resize e");
// console.log("extent " + chart.brush().extent());
// var brushwidth = chart.brush().extent()[1] - chart.brush().extent()[0];
//chart.brush().on("brush", console.log('brush'))
//chart.brush().on("brushstart", console.log('brushedstart'))
//chart.brush().on("brushend", console.log('brushedend'))
// console.log("brushwidth " + brushwidth)
// console.log("extent " + chart.brush().extent());
// var brushwidth = chart.brush().extent()[1] - chart.brush().extent()[0];
//console.log("width " + brushwidth)
// chart.brush().selectAll("resize").select("rect").remove();
// chart.select(g.brush);
//.handleSize(0);
// svg.append("g")
// .attr("class", "brush")
// .selectAll("rect")
// .attr("visibility", hidden)
// .attr("height", 0)
// .selectAll("path")
// .attr("visibility", hidden)
// .attr("height", 0);
// onbrush();
//var chartBrush = chart.select('g.brush');
//var resizeE = chartBrush.select('resize e');//.data([extra_data]);
//resizeE.select("rect").remove();
//resizeE.select("path").remove();
// alert(resizeE.id);
//resizeArea.enter().append('resizeArea').attr({
// width: '0px',
// height: '0px',
//});
//resizeArea.attr('width', 0);
//resizeArea.attr('height', 0);
// resizeE.remove();
// d3.select("g.brush").call(brush.extent([0, 0]))
// d3.selectAll("rect.bar").style("opacity", "0.4");
// d3.select(this).selectAll('g.resize').remove();
// var slider = context.append("g")
//.attr("class", "x brush")
//.call(brush);
// Remove the resize control
// chart.svg().selectAll('g.resize').remove();
// var res = g.selectAll("g.brush g.resize");
//#### Data Count dateformat.parse(d.time);
bitCount /* dc.dataCount('.dc-data-count', 'chartGroup'); */
.dimension(crossFilteredData)
.group(all)
.html({
some: '<strong>%filter-count</strong> records selected out of <strong>%total-count</strong> records' +
' | <a href=\'javascript: dc.filterAll(); dc.renderAll();\'>Reset All</a>',
all: ' All records selected. Please click on the graph to apply filters.'
});
//#### Data Table
bitrateTable /* dc.dataTable('.dc-data-table', 'chartGroup') */
.dimension(dateDimension) // .dimension(dateDimension)
// Data table does not use crossfilter group but rather a closure as a grouping function
.group(function (d) {
var format = d3.format('02d');
return d.bitdate.getFullYear() + '/' + format((d.bitdate.getMonth() + 1));
})
.sortBy(function (d) { return d.bitdate; })
.size(13)// (_optional_) max number of records to be shown, `default = 25`
.columns([
'DATETIME',
'CHANNEL_ID',
'BITRATE'
])
// (_optional_) custom renderlet to post-process chart using [D3](http://d3js.org)
.on('renderlet', function (table) {
table.selectAll('.dc-table-group').classed('info', true);
});
//#### Rendering
//Render all charts on the page
dc.renderAll();
//#### Versions
//Determine the current version of dc with `dc.version`
d3.selectAll('#version').text(dc.version);
// Determine latest stable version in the repo via Github API
d3.json('https://api.github.com/repos/dc-js/dc.js/releases/latest', function (error, latestRelease) {
/*jshint camelcase: false */
d3.selectAll('#latest').text(latestRelease.tag_name); /* jscs:disable */
});
//});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
有什么想法吗？
谢谢，
丹妮
我记得这个fiddle！
对此感到抱歉，当时我没有意识到从 github.io 获取 dc.js 是多么糟糕的主意。现在 dc 已经升级到版本 3，只兼容 d3 v4 及更高版本，所有这些旧的 fiddle 都坏了。每当遇到旧答案时，我都会尝试修复它们。
这里的解决方案非常简单，只需明确来源 dc@2 而不是使用 github.io。用
替换 dc 的资源
https://unpkg.com/dc@2/dc.js
https://unpkg.com/dc@2/dc.css
看起来一切正常。
展望未来，我将以这种方式编写所有新的 fiddle。
当时创建的 jsFiddle 运行良好https://jsfiddle.net/dani2011/jydbqjgm/9/. It seems to be corrupted due to a problem with the resource file https://dc-js.github.io/dc.js/js/colorbrewer.js giving a 404 error. Replaced the corrupted version with https://cdn.jsdelivr.net/npm/colorbrewer@1.0.0/colorbrewer.js. In addition, updated all the other resource files with recent versions from https://cdnjs.com/libraries/。此外，由于 fiddle 本身托管在 https 上，因此称为 https。这是一些代码：
'use strict';
//#### Chart objects
var bitChart = dc.compositeChart("#bitrate-move-chart");//Before dynamic Y-Axis nonzero_min used var bitChart = dc.lineChart('#bitrate-move-chart');
var bitChart2 = dc.compositeChart("#bitrate-move-chart2");//Before dynamic Y-Axis nonzero_min used var bitChart = dc.lineChart('#bitrate-move-chart');
var timeSlider = dc.barChart('#bitrate-timeSlider-chart');
var bitCount = dc.dataCount('.dc-data-count');
var bitrateTable = dc.dataTable('.dc-data-table');
//#### Creating dynamic Y axis with min/max ticks' values depending on min/max of data - copied from http://jsfiddle.net/gordonwoodhull/7anae5c5/1/
function nonzero_min(chart) {
dc.override(chart, 'yAxisMin', function () {
var min = d3.min(chart.data(), function (layer) {
return d3.min(layer.values, function (p) {
return p.y + p.y0;
});
});
return dc.utils.subtract(min, chart.yAxisPadding());
});
return chart;
}
//#### 15 Min Interval - copied from https://github.com/mbostock/d3/blob/master/src/time/interval.js
var d3_date = Date;
function d3_time_interval(local, step, number) {
function round(date) {
var d0 = local(date), d1 = offset(d0, 1);
return date - d0 < d1 - date ? d0 : d1;
}
function ceil(date) {
step(date = local(new d3_date(date - 1)), 1);
return date;
}
function offset(date, k) {
step(date = new d3_date(+date), k);
return date;
}
function range(t0, t1, dt) {
var time = ceil(t0), times = [];
if (dt > 1) {
while (time < t1) {
if (!(number(time) % dt)) times.push(new Date(+time));
step(time, 1);
}
} else {
while (time < t1) times.push(new Date(+time)), step(time, 1);
}
return times;
}
function range_utc(t0, t1, dt) {
try {
d3_date = d3_date_utc;
var utc = new d3_date_utc();
utc._ = t0;
return range(utc, t1, dt);
} finally {
d3_date = Date;
}
}
local.floor = local;
local.round = round;
local.ceil = ceil;
local.offset = offset;
local.range = range;
var utc = local.utc = d3_time_interval_utc(local);
utc.floor = utc;
utc.round = d3_time_interval_utc(round);
utc.ceil = d3_time_interval_utc(ceil);
utc.offset = d3_time_interval_utc(offset);
utc.range = range_utc;
return local;
}
function d3_time_interval_utc(method) {
return function (date, k) {
try {
d3_date = d3_date_utc;
var utc = new d3_date_utc();
utc._ = date;
return method(utc, k)._;
} finally {
d3_date = Date;
}
};
}
//#### Generalization of d3.time.minute copied from- https://github.com/mbostock/d3/blob/master/src/time/minute.js
function n_minutes_interval(nmins) {
var denom = 6e4 * nmins;
return d3_time_interval(function (date) {
return new d3_date(Math.floor(date / denom) * denom);
}, function (date, offset) {
date.setTime(date.getTime() + Math.floor(offset) * denom); // DST breaks setMinutes
}, function (date) {
return date.getMinutes();
});
}
//bitChart
var min15 = n_minutes_interval(15);
//bitChart2
var min15_2 = n_minutes_interval(15);
//timeslider
var min15_3 = n_minutes_interval(15);
//### Load data
var data = d3.csv.parse(d3.select("pre#anotherdata").text());
//d3.csv('CHANNEL_CLUSTER_BITRATE_takeThis.csv', function (data) {
// Format CSV data
var dateFormat = d3.time.format('%Y/%m/%d/%H:%M');
var numberFormat = d3.format('.2');
data.forEach(function (d) {
d.bitdate = new Date(d.DATETIME); //d.DATETIME = dateFormat.parse(d.DATETIME);
d.BITRATE = +d.BITRATE.match(/\d+/); //d.BITRATE = +d.BITRATE;
});
//### Crossfilter Dimensions
var crossFilteredData = crossfilter(data);
var all = crossFilteredData.groupAll();
// Dimension by full date
//bitChart
var dateDimension = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//bitChart2
var dateDimension2 = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//timeSlider
var dateDimension3 = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//dropDown
var filterDimension = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//### Crossfiltered Groups
//timeSlider group
var minIntervalWeekBitrateGroup3 = dateDimension3.group(min15_3).reduceSum(function (d) {
return 10 //+d.BITRATE
});
//bitChart group-Group bitrate per week, 15 minInterval - maintain running tallies
var bitrateWeekMinIntervalGroupMove = dateDimension.group(min15).reduce(
/* callback for when data is added to the current filter results */
function (p, v) {
++p.count;
p.BITRATE = +v.BITRATE;
p.total += +v.BITRATE;
p.avg = p.count ? Math.round(p.total / p.count) : 0;
return p;
},
/* callback for when data is removed from the current filter results */
function (p, v) {
--p.count;
p.BITRATE = +v.BITRATE;
p.total -= +v.BITRATE;
p.avg = p.count ? Math.round(p.total / p.count) : 0;
return p;
},
/* initialize p */
function () {
return {
count: 0,
bitrate: 0,
total: 0,
avg: 0
};
}
);
//bitChart2 group
var bitrateWeekMinIntervalGroupMove2 = dateDimension2.group(min15_2).reduce(
/* callback for when data is added to the current filter results */
function (p, v) {
++p.count;
p.BITRATE = +v.BITRATE;
p.total += +v.BITRATE;
p.avg = p.count ? Math.round(p.total / p.count) : 0;
return p;
},
/* callback for when data is removed from the current filter results */
function (p, v) {
--p.count;
p.BITRATE = +v.BITRATE;
p.total -= +v.BITRATE;
p.avg = p.count ? Math.round(p.total / p.count) : 0;
return p;
},
/* initialize p */
function () {
return {
count: 0,
bitrate: 0,
total: 0,
avg: 0
};
}
);
//### Domain limits
var minDate = dateDimension.bottom(1)[0].DATETIME;// alert(minDate);
var maxDate = dateDimension.top(1)[0].DATETIME;// alert(maxDate);
//domain limits for brush
var start = moment(new Date(minDate));
var end = moment(new Date(maxDate));
var tmp;
//max line
var maxbit = d3.max(data, function (d) { return +d["BITRATE"]; }); //alert(maxbit);
var graphSpan;
function addHours(amountHours) {
graphSpan = amountHours;
timeSlider.replaceFilter(dc.filters.RangedFilter(start, moment(start).add(amountHours, 'hours')));
dc.redrawAll();
}
//dropdown copied from <!--http://jsfiddle.net/gordonwoodhull/ewmrmu83/9/-->
d3.select('#hoursDropDown').on('change', function() {
addHours(this.value);
});
//###Graphs//bitChart
bitChart /* dc.lineChart('#bitrate-move-chart', 'chartGroup') */
.xUnits(min15.range) //.xUnits(d3.time.weeks)//.round(d3.time.week) //.round(d3.time.minute)//d3.time.month.round)
.x(d3.time.scale().domain([new Date(minDate), new Date(maxDate)]))
.yAxisPadding('5%')
.elasticY(true)
//Specify a "range chart" to link its brush extent with the zoom of the current "focus chart".
.rangeChart(timeSlider)
.width(450)
.height(200)
.transitionDuration(500)
.margins({ top: 30, right: 50, bottom: 100, left: 50, padding: 1 })
.mouseZoomable(true)
.brushOn(false)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
//Render max bitrate horizontal line copied from bar-extra-line.html
.yAxisLabel("Total Bitrate per 15 minutes")
.renderlet(function (chart) {
chart.svg().selectAll('.chart-body').attr('clip-path', null)
chart.selectAll('g.x text')
.attr('transform', 'translate(-10,10) rotate(315)');
})
.on('renderlet', function (chart) {
var left_y = 10, right_y = 70; // use real statistics here!
var extra_data = [{ x: chart.x().range()[0], y: chart.y()(left_y) }, { x: chart.x().range()[1], y: chart.y()(right_y) }];
var line = d3.svg.line()
.x(function (d) { return d.x; })// console.log("d.x " + d.x);
.y(function (d) { return maxbit; })
.interpolate('linear');
var chartBody = chart.select('g.chart-body');
var path = chartBody.selectAll('path.extra').data([extra_data]);
path.enter().append('path').attr({
class: 'extra',
stroke: 'red',
id: 'extra-line'
});
path.attr('d', line);
// Label the max line
var text = chartBody.selectAll('text.extra-label').data([0]);
text.enter().append('text')
.attr('text-anchor', 'middle')
.append('textPath').attr({
class: 'extra-label',
'xlink:href': '#extra-line',
startOffset: '50%'
})
.text('Total Bitrate Max Value');
})
// .ordinalColors('red')
// Title can be called by any stack layer.
.title(function (d) {
var value = d.value.total ? d.value.total : d.value;
if (isNaN(value)) {
value = 0;
}
// console.log("dateFormat(d.key) " + dateFormat(d.key));
return dateFormat(d.key) + ' \n Total Bit:' + numberFormat(value)
})
//Creating dynamic Y axis with min max ticks' values depending on min max of data - copied from http://jsfiddle.net/gordonwoodhull/7anae5c5/1/
.compose([
nonzero_min(dc.lineChart(bitChart)
.dimension(min15)
.colors('blue')
.group(bitrateWeekMinIntervalGroupMove, 'Bitrate Total')
.valueAccessor(function (d) {
return d.value.total;
})
// .dashStyle([2,2])
.interpolate('step-after')
.renderArea(false)
.brushOn(false)
.renderDataPoints(false)
.clipPadding(10)),
])
bitChart.render();
//bitChart2
bitChart2 /* dc.lineChart('#bitrate-move-chart', 'chartGroup') */
.xUnits(min15_2.range) //.xUnits(d3.time.weeks)//.round(d3.time.week) //.round(d3.time.minute)//d3.time.month.round)
.x(d3.time.scale().domain([new Date(minDate), new Date(maxDate)]))
.yAxisPadding('5%')
.elasticY(true)
//Specify a "range chart" to link its brush extent with the zoom of the current "focus chart".
.rangeChart(timeSlider)
.width(450)
.height(200)
.transitionDuration(500)
.margins({ top: 30, right: 50, bottom: 100, left: 50, padding: 1 })
.mouseZoomable(true)
.brushOn(false)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
//Render max bitrate horizontal line copied from bar-extra-line.html
.yAxisLabel("Total Bitrate per 15 minutes")
.renderlet(function (chart) {
chart.svg().selectAll('.chart-body').attr('clip-path', null)
chart.selectAll('g.x text')
.attr('transform', 'translate(-10,10) rotate(315)');
})
.on('renderlet', function (chart) {
var left_y = 10, right_y = 70; // use real statistics here!
var extra_data = [{ x: chart.x().range()[0], y: chart.y()(left_y) }, { x: chart.x().range()[1], y: chart.y()(right_y) }];
var line = d3.svg.line()
.x(function (d) { return d.x; })
.y(function (d) { return maxbit; })
.interpolate('linear');
var chartBody = chart.select('g.chart-body');
var path = chartBody.selectAll('path.extra').data([extra_data]);
path.enter().append('path').attr({
class: 'extra',
stroke: 'red',
id: 'extra-line'
});
path.attr('d', line);
// Label the max line
var text = chartBody.selectAll('text.extra-label').data([0]);
text.enter().append('text')
.attr('text-anchor', 'middle')
.append('textPath').attr({
class: 'extra-label',
'xlink:href': '#extra-line',
startOffset: '50%'
})
.text('Total Bitrate Max Value');
})
// .ordinalColors('red')
// Title can be called by any stack layer.
.title(function (d) {
var value = d.value.total ? d.value.total : d.value;
if (isNaN(value)) {
value = 0;
}
return dateFormat(d.key) + ' \n Total Bit:' + numberFormat(value)
})
//Creating dynamic Y axis with min max ticks' values depending on min max of data - copied from http://jsfiddle.net/gordonwoodhull/7anae5c5/1/
.compose([
nonzero_min(dc.lineChart(bitChart2)
.dimension(min15_2)
.colors('blue')
.group(bitrateWeekMinIntervalGroupMove2, 'Bitrate Total')
.valueAccessor(function (d) {
return d.value.total;
})
//.dashStyle([2,2])
.interpolate('step-after')
.renderArea(false)
.brushOn(false)
.renderDataPoints(false)
.clipPadding(10)),
])
bitChart2.render();
//Range Chart - timeSlider
// Since this bar chart is specified as "range chart" for the line chart, its brush extent will always match the zoom of the line chart.
timeSlider
.dimension(dateDimension3)//.dimension(min15)
.group(minIntervalWeekBitrateGroup3)
//.x(d3.time.scale().range([0, brushContainer.select("rect").attr("width")]).domain([new Date(dateDimension3.bottom(1)[0].DATETIME), new Date(dateDimension3.top(1)[0].DATETIME)]))
.x(d3.time.scale().domain([new Date(dateDimension3.bottom(1)[0].DATETIME), new Date(dateDimension3.top(1)[0].DATETIME)]))
.round(dc.round.floor) //(d3.time.month.round)
.xUnits(min15_3.range)//.xUnits(d3.time.week) //.xUnits(d3.time.minute) //.xUnits(d3.time.months)
.width(990) /* dc.barChart('#bitrate-timeSlider-chart', 'chartGroup'); */
.height(40)
.margins({ top: 0, right: 50, bottom: 20, left: 40 })
// .centerBar(true)
.gap(1)
.mouseZoomable(true)
.on('filtered',function (chart){
console.log("filtered");
})
.on('preRedraw',function (chart)
{
console.log("filtered");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('renderlet', function (chart) {
console.log("renderlet myjs");
var brushg = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush");
var resizeg = brushg.selectAll("g.resize").selectAll("*").data(data[0]);
var timesliderSVG3 = resizeg.exit().remove();
//////stop brush events
// var brush = d3.svg.brush()
// brush.on("brushstart", null).on("brush", null).on("brushend", null).on("touchmove.brush", null).on("touchend.brush", null).on("mousemove.brush", null).on("mouseup.brush", null);
// brushg.call(brush)
// brushg.on("brushstart", d3.event.stopPropagation()).on("brush", d3.event.stopPropagation()).on("brushend", d3.event.stopPropagation()).on("touchmove.brush", null).on("touchend.brush", d3.event.stopPropagation()).on("mousemove.brush", d3.event.stopPropagation()).on("mouseup.brush", d3.event.stopPropagation());
//disable resize(not working)
// var brush = d3.svg.brush()
//// brush.on("brushstart", null).on("brush", null).on("brushend", null).on("touchmove.brush", null).on("touchend.brush", null).on("mousemove.brush", null).on("mouseup.brush", null);
// var brush1 = brush.on("brush", brushed);
// function brushed() {
// size = extent[1] - extent[0],
// domain = x.domain(),
// x0 = domain[0] ,
// x1 = domain[1] ;
// brush.extent(x0, x1);
// var timesliderSVG4 = brushg.on("brushstart", function () { resizeg.exit().remove() }).on("brush", function () { resizeg.exit().remove() }).on("brushend", function () {resizeg.exit().remove() })
// var timesliderSVG6 = resizeg.style("display", "none");
})
.on('pretransition', function (chart) {
console.log("filtered myjs");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('postRender', function (chart) {
console.log("postRender myjs");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('preRender', function (chart) {
console.log("preRender myjs");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('postRedraw', function (chart) {
console.log("postRedraw myjs");
timeSlider.extendBrush = function() {
var extent = timeSlider.brush().extent();
if(graphSpan) {
extent[1] = moment(extent[0]).add(graphSpan, 'hours');
timeSlider.brush().extent(extent);
}
return extent;
}
//////code from http://bl.ocks.org/mbostock/6498000
//var brush = d3.svg.brush()
//brush.on("brush", brushmove);
//brushg.call(brush);
//brushg.selectAll("rect.background")
//.on("mousedown.brush", brushcenter)
//.on("touchstart.brush", brushcenter);
//brushg.call(brush.event);
//function brushmove() {
// var extent = brush.extent();
// return extent[1] - extent[0];
// var extra_data = [{ x: chart.x().range()[0] }, { x: chart.x().range()[1] }];
// // dot.classed("selected", function (d) { return extent[0] <= d && d <= extent[1]; });
//}
//function brushcenter() {
// var self = d3.select(window),
// target = d3.event.target,
// extent = brush.extent(),
// size = extent[1] - extent[0],
// domain = x.domain(),
// x0 = domain[0] + size / 2,
// x1 = domain[1] - size / 2;
// recenter(true);
// brushmove();
// if (d3.event.changedTouches) {
// self.on("touchmove.brush", brushmove).on("touchend.brush", brushend);
// } else {
// self.on("mousemove.brush", brushmove).on("mouseup.brush", brushend);
// }
// function brushmove() {
// d3.event.stopPropagation();
// center = Math.max(x0, Math.min(x1, x.invert(d3.mouse(target)[0])));
// recenter(false);
// }
// function brushend() {
// brushmove();
// self.on(".brush", null);
// }
//}
//function recenter(smooth) {
// if (centering) return; // timer is active and already tweening
// if (!smooth) return void tween(1); // instantaneous jump
// centering = true;
// function tween(alpha) {
// var extent = brush.extent(),
// size = extent[1] - extent[0],
// center1 = center * alpha + (extent[0] + extent[1]) / 2 * (1 - alpha);
// brushg
// .call(brush.extent([center1 - size / 2, center1 + size / 2]))
// .call(brush.event);
// return !(centering = Math.abs(center1 - center) > 1e-3);
// }
// d3.timer(function () {
// return tween(alpha);
// });
//}
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
.on('zoomed', function (chart) {
console.log("zoomed myjs");
// var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})
//var timesliderSVG2 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize path").data(data[0]).exit().remove();
//var chartBrush = timeSlider.select('g.brush');
//var resizeE = chartBrush.select('resize e');//.data([extra_data]);
//resizeE.select("rect").remove();
//resizeE.select("path").remove();
// onbrush();
//function onbrush(chart) {
// //console.log(d3.event)
// //var chartBrush = timeSlider.select('g.brush');
// //var resizeE = chartBrush.select('resize e');//.data([extra_data]);
// //resizeE.select("rect").remove();
// //resizeE.select("path").remove();
// //if (chart.brush().event.type === "brush" && chart.brush().event.mode === "resize") {
// // var currentExtent = brush.extent();
// // console.log("currentExtent: " + currentExtent);
// // var side = (+currentExtent[0] !== +startExtent[0]) ? "left" : "right";
// // console.log(side);
// //}
//}
// var timesliderSVG4 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("rect.handle").data(data[0]).exit().remove();
// var timesliderSVG5 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("rect.background").selectAll("*").data(data[0]).exit().remove();
// var svg6 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").data([{ type: "w" }, { type: "e" }]).selectAll("path").exit().remove();
// var extra_data = [{ x: chart.x().range()[0] }, { x: chart.x().range()[1] }];
// console.log("preRender");
// var brushExtent = chart.brush().extent();
// d3.select("#bitrate-timeSlider-chart").selectAll("g.resize").style("visibility","hidden");
// var timesliderSVG = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").remove();
// var anotherTimeSliderSVG = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").data(data[0]).exit().remove();
// var timesliderSVG2 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize path").data(data[0]).exit().remove();
// var justRemove = d3.selectAll("g.resize").remove();
// var brushSVG = d3.select("g.brush").selectAll("g.resize").data([extra_data]).exit().remove();
// d3.select("g.parent").selectAll("*").remove();
// timesliderSVG.svg.selectAll("g.resize e").remove();
// timesliderSVG.selectAll(".g.resize e").data([]).exit().remove()
// timesliderSVG.select("svg").select("g").select("g.brush").select("g.resize e").enter().remove("g.resize e");
// console.log("extent " + chart.brush().extent());
// var brushwidth = chart.brush().extent()[1] - chart.brush().extent()[0];
//chart.brush().on("brush", console.log('brush'))
//chart.brush().on("brushstart", console.log('brushedstart'))
//chart.brush().on("brushend", console.log('brushedend'))
// console.log("brushwidth " + brushwidth)
// console.log("extent " + chart.brush().extent());
// var brushwidth = chart.brush().extent()[1] - chart.brush().extent()[0];
//console.log("width " + brushwidth)
// chart.brush().selectAll("resize").select("rect").remove();
// chart.select(g.brush);
//.handleSize(0);
// svg.append("g")
// .attr("class", "brush")
// .selectAll("rect")
// .attr("visibility", hidden)
// .attr("height", 0)
// .selectAll("path")
// .attr("visibility", hidden)
// .attr("height", 0);
// onbrush();
//var chartBrush = chart.select('g.brush');
//var resizeE = chartBrush.select('resize e');//.data([extra_data]);
//resizeE.select("rect").remove();
//resizeE.select("path").remove();
// alert(resizeE.id);
//resizeArea.enter().append('resizeArea').attr({
// width: '0px',
// height: '0px',
//});
//resizeArea.attr('width', 0);
//resizeArea.attr('height', 0);
// resizeE.remove();
// d3.select("g.brush").call(brush.extent([0, 0]))
// d3.selectAll("rect.bar").style("opacity", "0.4");
// d3.select(this).selectAll('g.resize').remove();
// var slider = context.append("g")
//.attr("class", "x brush")
//.call(brush);
// Remove the resize control
// chart.svg().selectAll('g.resize').remove();
// var res = g.selectAll("g.brush g.resize");
//#### Data Count dateformat.parse(d.time);
bitCount /* dc.dataCount('.dc-data-count', 'chartGroup'); */
.dimension(crossFilteredData)
.group(all)
.html({
some: '<strong>%filter-count</strong> records selected out of <strong>%total-count</strong> records' +
' | <a href=\'javascript: dc.filterAll(); dc.renderAll();\'>Reset All</a>',
all: ' All records selected. Please click on the graph to apply filters.'
});
//#### Data Table
bitrateTable /* dc.dataTable('.dc-data-table', 'chartGroup') */
.dimension(dateDimension) // .dimension(dateDimension)
// Data table does not use crossfilter group but rather a closure as a grouping function
.group(function (d) {
var format = d3.format('02d');
return d.bitdate.getFullYear() + '/' + format((d.bitdate.getMonth() + 1));
})
.sortBy(function (d) { return d.bitdate; })
.size(13)// (_optional_) max number of records to be shown, `default = 25`
.columns([
'DATETIME',
'CHANNEL_ID',
'BITRATE'
])
// (_optional_) custom renderlet to post-process chart using [D3](http://d3js.org)
.on('renderlet', function (table) {
table.selectAll('.dc-table-group').classed('info', true);
});
//#### Rendering
//Render all charts on the page
dc.renderAll();
//#### Versions
//Determine the current version of dc with `dc.version`
d3.selectAll('#version').text(dc.version);
// Determine latest stable version in the repo via Github API
d3.json('https://api.github.com/repos/dc-js/dc.js/releases/latest', function (error, latestRelease) {
/*jshint camelcase: false */
d3.selectAll('#latest').text(latestRelease.tag_name); /* jscs:disable */
});
//});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
有什么想法吗？
谢谢，
丹妮
我记得这个fiddle！
对此感到抱歉，当时我没有意识到从 github.io 获取 dc.js 是多么糟糕的主意。现在 dc 已经升级到版本 3，只兼容 d3 v4 及更高版本，所有这些旧的 fiddle 都坏了。每当遇到旧答案时，我都会尝试修复它们。
这里的解决方案非常简单，只需明确来源 dc@2 而不是使用 github.io。用
https://unpkg.com/dc@2/dc.js
https://unpkg.com/dc@2/dc.css
看起来一切正常。
展望未来，我将以这种方式编写所有新的 fiddle。