请问如何清除此图表周围的空白？我曾尝试调整轴的范围，范围，波段和变换，但是当我一步执行fwd时，其他地方发生了其他中断，例如刻度线关闭，圆圈被轴切断等。片段是我设法取得的最好成绩。
谢谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chart</title>
<!-- Reference style.css -->
<!-- <link rel="stylesheet" type="text/css" href="style.css">-->
<!-- Reference minified version of D3 -->
<script src='https://d3js.org/d3.v4.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
</head>
<body>
<div id='chart'>
<svg width="700" height="500">
</svg>
</div>
<script>
var dataset = [
{'xKey':1, 'xLabel':'x1','yKey':1, 'yLabel':'y1', 'val':Math.random() * 25},
{'xKey':1, 'xLabel':'x1','yKey':2, 'yLabel':'y2', 'val':Math.random() * 25},
{'xKey':1, 'xLabel':'x1','yKey':3, 'yLabel':'y3', 'val':Math.random() * 25},
{'xKey':1, 'xLabel':'x1','yKey':4, 'yLabel':'y4', 'val':Math.random() * 25},
{'xKey':2, 'xLabel':'x2','yKey':1, 'yLabel':'y1', 'val':Math.random() * 25},
{'xKey':2, 'xLabel':'x2','yKey':2, 'yLabel':'y2', 'val':Math.random() * 25},
{'xKey':2, 'xLabel':'x2','yKey':3, 'yLabel':'y3', 'val':Math.random() * 25},
{'xKey':2, 'xLabel':'x2','yKey':4, 'yLabel':'y4', 'val':Math.random() * 25},
{'xKey':3, 'xLabel':'x3','yKey':1, 'yLabel':'y1', 'val':Math.random() * 25},
{'xKey':3, 'xLabel':'x3','yKey':2, 'yLabel':'y2', 'val':Math.random() * 25},
{'xKey':3, 'xLabel':'x3','yKey':3, 'yLabel':'y3', 'val':Math.random() * 25},
{'xKey':3, 'xLabel':'x3','yKey':4, 'yLabel':'y4', 'val':Math.random() * 25},
{'xKey':4, 'xLabel':'x4','yKey':1, 'yLabel':'y1', 'val':Math.random() * 25},
{'xKey':4, 'xLabel':'x4','yKey':2, 'yLabel':'y2', 'val':Math.random() * 25},
{'xKey':4, 'xLabel':'x4','yKey':3, 'yLabel':'y3', 'val':Math.random() * 25},
{'xKey':4, 'xLabel':'x4','yKey':4, 'yLabel':'y4', 'val':Math.random() * 25},
{'xKey':5, 'xLabel':'x5','yKey':1, 'yLabel':'y1', 'val':Math.random() * 25},
{'xKey':5, 'xLabel':'x5','yKey':2, 'yLabel':'y2', 'val':Math.random() * 25},
{'xKey':5, 'xLabel':'x5','yKey':3, 'yLabel':'y3', 'val':Math.random() * 25},
{'xKey':5, 'xLabel':'x5','yKey':4, 'yLabel':'y4', 'val':Math.random() * 25},
//
];
renderPlot(dataset)
function chartIni(dataset) {
var svg = d3.select("#chart").select("svg");
var tsn = d3.transition().duration(1000);
var xLabels = d3.map(dataset, function (d) {return d.xLabel;}).keys(),
yLabels = d3.map(dataset, function (d) {return d.yLabel;}).keys();
var margin = {top: 0, right: 25, bottom: 70, left: 35};
var width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
var dotSpacing = 0,
dotWidth = width / (2 * (xLabels.length + 1)),
dotHeight = height / (2 * yLabels.length);
var valRange = d3.extent(dataset, function (d) {return d.val});
var colors = ['#2C7BB6', '#00A6CA', '#00CCBC', '#90EB9D', '#FFFF8C', '#F9D057', '#F29E2E', '#E76818', '#D7191C'];
var colorScale = d3.scaleQuantile()
.domain([valRange[0], colors.length - 1, valRange[1]])
.range(colors);
// the scale
var scale = {
x: d3.scaleLinear().range([-1, width]),
y: d3.scaleLinear().range([height, 0]),
};
var xBand = d3.scaleBand().domain(xLabels).rangeRound([0, width-2*dotWidth]),
yBand = d3.scaleBand().domain(yLabels).rangeRound([height, 0]);
var axis = {
x: d3.axisBottom(scale.x).tickFormat((d, e) => xLabels[d]),
y: d3.axisLeft(scale.y).tickFormat((d, e) => yLabels[d]),
};
var zoom = d3.zoom()
.scaleExtent([1, dotHeight])
.on("zoom", zoomed);
// SVG canvas
svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(zoom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Clip path
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height + dotHeight);
// Heatmap dots
var heatDotsGroup = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("g");
//Create X axis
var renderXAxis = svg.append("g")
.attr("class", "x axis")
//.attr("transform", "translate(0," + scale.y(-0.5) + ")")
//Create Y axis
var renderYAxis = svg.append("g")
.attr("class", "y axis")
function zoomed() {
d3.event.transform.y = 0;
d3.event.transform.x = Math.min(d3.event.transform.x, 5);
d3.event.transform.x = Math.max(d3.event.transform.x, (1 - d3.event.transform.k) * width);
// update: rescale x axis
renderXAxis.call(axis.x.scale(d3.event.transform.rescaleX(scale.x)));
// Make sure that only the x axis is zoomed
heatDotsGroup.attr("transform", d3.event.transform.toString().replace(/scale\((.*?)\)/, "scale($1, 1)"));
}
var chartData = {};
chartData.scale = scale;
chartData.axis = axis;
chartData.xBand = xBand;
chartData.yBand = yBand;
chartData.colorScale = colorScale;
chartData.heatDotsGroup = heatDotsGroup;
chartData.dotWidth = dotWidth;
chartData.dotHeight = dotHeight;
chartData.tsn = tsn;
return chartData;
};
function updateScales(data, scale){
scale.x.domain([-1, d3.max(data, d => d.xKey)]),
scale.y.domain([0, d3.max(data, d => d.yKey)])
}
function renderPlot(dataset) {
var svg = d3.select("#chart")
.select("svg");
if (svg.select("#clip").empty()) {
chartData = chartIni(dataset);
}
//chartData = svg.datum();
//Do the axes
updateScales(dataset, chartData.scale);
svg.select('.y.axis').call(chartData.axis.y)
svg.select('.x.axis')
.attr("transform", "translate(0," + chartData.scale.y(-0.5) + ")")
.call(chartData.axis.x)
// Do the chart
const update = chartData.heatDotsGroup.selectAll("ellipse")
.data(dataset);
update
.enter()
.append("ellipse")
.attr("rx", chartData.dotWidth)
.attr("ry", chartData.dotHeight)
.merge(update)
.transition(chartData.tsn)
.attr("cx", function (d) {return chartData.scale.x(d.xKey) - chartData.xBand.bandwidth();})
.attr("cy", function (d) {return chartData.scale.y(d.yKey) + chartData.yBand.bandwidth();})
.attr("fill", function (d) { return chartData.colorScale(d.val);} );
update.exit().remove();
}
</script>
</body>
</html>