1
dataTable没有跨越到所需的colspan /宽度。通过在dc.css（dc-tabe-row，dc-table-column）中输入.on（'renderlet'，function（table）{table.selectAll style），试图将其更改为https://facebook.github.io/react/docs/dom-elements.html中的React方式。 DC-数据表），该表图表本身等 上涂布宽度这是我有：dataTable cols没有跨越到正确的宽度（dc.js，crossfilter，d3 v4.2.8，React）
打印屏幕1： 
打印屏幕2： 
的TableChart .js码：
import React, { PropTypes } from 'react';
import ReactDOM from "react-dom";
import * as d3 from 'd3';
import dc from "dc";
import * as crossfilter from 'crossfilter';
import {Jumbotron } from 'react-bootstrap';
import functionDCHelper from './functionDCHelper';
import {scaleTime, scaleLinear} from 'd3-scale';
class TableChart extends React.Component {
componentDidMount() {
var bitRateTableChart = dc.dataTable(this.refs.tableChart);
var { dateDimension } = functionDCHelper.generateValues(this.props.data);
bitRateTableChart
.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));
})
.columns(
[
'DATETIME',
'CHANNEL_ID',
'BITRATE'
])
.ordering(function (d) { return d.bitdate; }) /// sortBy(function (d) { return d.bitdate; })
// (_optional_) custom renderlet to post-process chart using [D3](http://d3js.org)
.on('renderlet', function (table) {
table.selectAll('.dc-table-group').classed('info', true);
})
.size(15)
bitRateTableChart.render();// dc.renderAll();
}
render() {
return(
<div className="row">
<div className="table table-hover dc-data-table dc-table-row" ref="tableChart">
</div>
</div>
)
}
}
export default TableChart;
的container.js代码：
import React from 'react'
import ReactDOM from "react-dom";
import ReactGridLayout from "react-grid-layout";
import Header from "../components/Header.js";
import LineChart from "../components/LineChart.js";
import TimeChart from "../components/TimeChart.js";
import TableChart from "../components/TableChart.js";
class Dashboard extends React.Component {
render() {
var layout = [
{i: 'a', x: 0, y: 0, w: 2, h: 2,minW: 2, maxW: 4},
{i: 'b', x: 1, y: 1, w: 3, h: 2},
{i: 'c', x: 4, y: 0, w: 1, h: 2},
{i: 'd', x: 5, y: 0, w: 1, h: 2},
{i: 'e', x: 6, y: 0, w: 1, h: 2},
{i: 'f', x: 7, y: 0, w: 1, h: 2}
];
return (
<div>
<div >
<LineChart data={this.props.data} rangeSlider={this.dcTimeChart}/>
</div>
<div >
<TableChart data={this.props.data} style={divStyle} />
</div>
</div>
)
}
}
export default Dashboard;
的DCFunctionHelper.js代码：
import crossfilter from 'crossfilter';
import * as d3 from 'd3';
import dc from 'dc';
var minDate,min15,bitrateWeekMinIntervalGroupMove,maxDate,minIntervalWeekBitrateGroup,dateDimension,dateFormat,numberFormat,maxbit;
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();
});
}
min15 = n_minutes_interval(15);
dateFormat = d3.timeFormat('%Y/%m/%d/%H:%M');
//dateFormat = d3.timeParse ('%Y/%m/%d/%H:%M');
// parse the date/time
//var dateFormat = d3.timeParse("%d-%b-%y");
numberFormat = d3.format('d');
//### Crossfilter Dimensions
function generateValues(data) {
data.forEach(function (d) {
d.bitdate = new Date(d.DATETIME); //d.DATETIME = dateFormat.parse(d.DATETIME);
// d.month = d3.time.month(d.bitdate);
// d.week = d3.time.week(d.bitdate);
d.BITRATE = String(d.BITRATE).match(/\d+/); //d.BITRATE = +d.BITRATE;
});
var crossFilteredData = crossfilter(data);
var all = crossFilteredData.groupAll();
// Dimension by full date
dateDimension = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
maxbit = d3.max(data, function (d) { return +d["BITRATE"]; }); //alert(maxbit);
//Group bitrate per week, 15 minInterval - maintain running tallies
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
};
}
);
try {
minDate = dateDimension.bottom(1)[0].DATETIME;
} catch(err) {
minDate = new Date("2016-06-14 0:00");
}
try {
maxDate = dateDimension.top(1)[0].DATETIME;
} catch(err) {
maxDate = new Date("2016-06-18 23:55");
}
return {
min15, minDate, maxDate, bitrateWeekMinIntervalGroupMove,minIntervalWeekBitrateGroup, dateDimension, maxbit
};
}
export default {
generateValues,
nonzero_min,
dateFormat,
numberFormat
};
任何帮助，将不胜感激！
是的，我认为CSS是最好的方式去这里。 'dc.dataTable'真的很简单，不会自己做很多样式。另外，所有不是数据驱动的东西都是使用CSS更好的样式。 – Gordon
谢谢戈登。 – Dani