dc.js减少了svg元素中的空格/填充

Question

我在dc.js中有一个图表（使用d3.js）。

我需要在div容器中使用我的SVG图表，我注意到SVG元素中有一些空白区域 - 在SVG元素和内部的g元素之间。

请注意，在此堆栈代码示例（以及jsFiddle example）中有一个内部svg元素（ svg＆gt; svg＆gt; g ），但在我的实时代码中只有一个svg g元素之前的元素（ svg＆gt; g ）。

如何设置图表样式以立即删除外部svg容器内的空白区域？ （在下面的示例中，我希望删除绿线和红线之间的空白区域。）

var myCSV = [
	{"shift":"1","date":"01/01/2016/08/00/00","car":"178","truck":"255","bike":"17","moto":"7"},
	{"shift":"2","date":"01/01/2016/17/00/00","car":"125","truck":"189","bike":"45","moto":"3"},
	{"shift":"3","date":"02/01/2016/08/00/00","car":"140","truck":"219","bike":"28","moto":"12"},
	{"shift":"4","date":"02/01/2016/17/00/00","car":"222","truck":"290","bike":"32","moto":"8"},
	{"shift":"5","date":"03/01/2016/08/00/00","car":"200","truck":"250","bike":"20","moto":"19"},
	{"shift":"6","date":"03/01/2016/17/00/00","car":"230","truck":"220","bike":"10","moto":"13"},
];

lc1 = dc.lineChart("#line1");

var dateFormat = d3.time.format("%d/%m/%Y/%H/%M/%S");

myCSV.forEach(function (d) {
	d.date = dateFormat.parse(d.date);
});

var facts = crossfilter(myCSV);
var dateDim = facts.dimension(function (d) {return d.date});

var carDim = facts.dimension(function (d) {return d['car']});
var dgCar = dateDim.group().reduceSum(function (d) {return d['car']});

var minDate = new Date ("2016-01-01T08:00:00.000Z");
var maxDate = new Date ("2016-01-03T17:00:00.000Z");	

var maxY = d3.max(myCSV, function(d) {return d['car']});

lc1
.renderArea(false)
.width(300)
.height(250)
.dimension(dateDim)
.group(dgCar)
.defined(function(d) {if(d.y !==null) {return d.y;}})
.transitionDuration(1000)
.margins({top: 30, right: 20, bottom: 35, left: 60})
.yAxisLabel('Cars')
.renderHorizontalGridLines(true)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]));
lc1.yAxis().ticks(5);
lc1.xAxis().ticks(3);

dc.renderAll();
dc.redrawAll();

svg{height:280px;}
#msg{position:fixed;top:0;right:0;padding:5px;}
svg{outline:1px solid green;}
svg>svg{outline:1px solid red;}
svg>g{outline:1px solid gold;}

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<link href="http://dc-js.github.io/dc.js/css/dc.css" rel="stylesheet"/>
<svg id="line1"></svg>

Answer 1

如果你减小边距的大小并增加内部svg的高度（以匹配外部svg），它会很好地贴合：

＆＃13;

＆＃13;

var myCSV = [
	{"shift":"1","date":"01/01/2016/08/00/00","car":"178","truck":"255","bike":"17","moto":"7"},
	{"shift":"2","date":"01/01/2016/17/00/00","car":"125","truck":"189","bike":"45","moto":"3"},
	{"shift":"3","date":"02/01/2016/08/00/00","car":"140","truck":"219","bike":"28","moto":"12"},
	{"shift":"4","date":"02/01/2016/17/00/00","car":"222","truck":"290","bike":"32","moto":"8"},
	{"shift":"5","date":"03/01/2016/08/00/00","car":"200","truck":"250","bike":"20","moto":"19"},
	{"shift":"6","date":"03/01/2016/17/00/00","car":"230","truck":"220","bike":"10","moto":"13"},
];

lc1 = dc.lineChart("#line1");

var dateFormat = d3.time.format("%d/%m/%Y/%H/%M/%S");

myCSV.forEach(function (d) {
	d.date = dateFormat.parse(d.date);
});

var facts = crossfilter(myCSV);
var dateDim = facts.dimension(function (d) {return d.date});

var carDim = facts.dimension(function (d) {return d['car']});
var dgCar = dateDim.group().reduceSum(function (d) {return d['car']});

var minDate = new Date ("2016-01-01T08:00:00.000Z");
var maxDate = new Date ("2016-01-03T17:00:00.000Z");	

var maxY = d3.max(myCSV, function(d) {return d['car']});

lc1
.renderArea(false)
.width(300)
.height(280)
.dimension(dateDim)
.group(dgCar)
.defined(function(d) {if(d.y !==null) {return d.y;}})
.transitionDuration(1000)
.margins({top: 0, right: 0, bottom: 20, left: 27})
.yAxisLabel('Cars')
.renderHorizontalGridLines(true)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]));
lc1.yAxis().ticks(5);
lc1.xAxis().ticks(3);

dc.renderAll();
dc.redrawAll();

＆＃13;

svg{height:280px;}
#msg{position:fixed;top:0;right:0;padding:5px;}
svg{outline:1px solid green;}
svg>svg{outline:1px solid red;}
svg>g{outline:1px solid gold;}

＆＃13;

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<link href="http://dc-js.github.io/dc.js/css/dc.css" rel="stylesheet"/>
<svg id="line1"></svg>

＆＃13;

＆＃13;

＆＃13;