dataTable cols不会跨越正确的宽度（dc.js，crossfilter，d3 v4.2.8，React）
dataTable不会跨越所需的colspan / width。试图通过输入.on（'renderlet'，函数（表）{table.selectAll样式，在dc.css（dc-tabe-row，dc-table）中将其改为https://facebook.github.io/react/docs/dom-elements.html中的React方式-column，.dc-data-table），在表格图表本身等上应用宽度。 这就是我所拥有的：
打印屏幕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
};
任何帮助将不胜感激！
1 个答案:
答案 0 :(得分：1)
通过index.html中的.dc-table-label更改样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
path.line {
fill: none;
stroke: blue;
stroke-width: 1.5px;
}
.y.axis line,
.y.axis path {
fill: none;
stroke: black;
}
.x.axis line,
.x.axis path {
fill: none;
stroke: black;
}
path.yRef{
storke-width:1.5px;
stroke: red;
dislplay:inline;
}
path.xRef{
storke-width:1.5px;
stroke:red;
dislplay:inline;
}
.dc-table-label{
width: 1000px;
column-span:all;
}
</style>
<title>Line Chart DC.js,React</title>
</head>
<body>
<div id="App"></div>
<script src="/bundle.js"></script>
</body>
</html>
欢迎任何其他/更好的建议。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？