javascript - D3 隐藏图表区域的溢出，当Y轴有最小值和最大值时

Question

我想创建一个图表，当我有 Y 轴的最大值和最小值时，它会隐藏折线图的溢出。例如，我的最小值为 200。我修改了 Y 轴的域 y.domain([0, d3.max(dataSet, function (d) { return d.value; })]); 到 y.domain([200, d3.max(dataSet, function (d) { return d.value; })]);。但是，如果它在 SVG 元素中有足够的空间，在 X 轴下方，它将从它下方开始。我在其他一些帖子中看到应该使用 forceY() 函数，但据我了解，它仅适用于 NVD3 ...此外，播放数据并删除指定级别下的数据点不是一个解决方案。

var dataSet = [{ date: '2013-01', value: '53' }, { date: '2013-02', value: '165' }, { date: '2013-03', value: '269' }, 
               { date: '2013-04', value: '344' }, { date: '2013-05', value: '376' }, { date: '2013-06', value: '410' }, 
               { date: '2013-07', value: '421' }, { date: '2013-08', value: '405' }, { date: '2013-09', value: '376' }, 
               { date: '2013-10', value: '359' }, { date: '2013-11', value: '392' }, { date: '2013-12', value: '433' }, 
               { date: '2014-01', value: '455' }, { date: '2014-02', value: '478' }, { date: '2014-03', value: '455' }, 
               { date: '2014-04', value: '500' }];

		// Set the dimensions of the canvas / graph
		var margin = {top: 30, right: 20, bottom: 40, left: 50},
			width = 600 - margin.left - margin.right,
			height = 370 - margin.top - margin.bottom;
		
		// Parse the date / time
		var parseDate = d3.time.format("%Y-%m").parse;
		
		// Set the ranges
		var x = d3.time.scale().range([0, width]);
		var y = d3.scale.linear().range([height, 0]);
		
		// Define the axes
		var xAxis = d3.svg.axis().scale(x)
			.orient("bottom").tickFormat(d3.time.format("%m"));
		var yAxis = d3.svg.axis().scale(y)
			.orient("left").ticks(5);
		
		// Define the line
		var valueline = d3.svg.line()
			.interpolate("basis") //smoothens the line
			.x(function(d) { return x(d.date); })
			.y(function(d) { return y(d.value); });
		
		// Adds the svg canvas
		var svg = d3.select("body")
			.append("svg")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom)
				.attr("id", "svg01")
			.append("g")
			.	attr("transform",
					"translate(" + margin.left + "," + margin.top + ")");
		
		// Get the data
		dataSet.forEach(function (d) {
			d.date = parseDate(d.date);
			d.value = +d.value;
		});

		// Scale the range of the data
		x.domain(d3.extent(dataSet, function (d) { return d.date; }));
		y.domain([200, d3.max(dataSet, function (d) { return d.value; })]);

		// Add the valueline path.
		svg.append("path")
			.attr("class", "line")
			.attr("d", valueline(dataSet));

		// Add the X Axis
		svg.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(0," + height + ")")
			.call(xAxis);

		// Add the Y Axis
		svg.append("g")
			.attr("class", "y axis")
			.call(yAxis);

body {
  font: 12px Arial;
}
path {
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}
.axis path,
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 1

您需要应用一个 clipPath:

var dataSet = [{ date: '2013-01', value: '53' }, { date: '2013-02', value: '165' }, { date: '2013-03', value: '269' }, 
               { date: '2013-04', value: '344' }, { date: '2013-05', value: '376' }, { date: '2013-06', value: '410' }, 
               { date: '2013-07', value: '421' }, { date: '2013-08', value: '405' }, { date: '2013-09', value: '376' }, 
               { date: '2013-10', value: '359' }, { date: '2013-11', value: '392' }, { date: '2013-12', value: '433' }, 
               { date: '2014-01', value: '455' }, { date: '2014-02', value: '478' }, { date: '2014-03', value: '455' }, 
               { date: '2014-04', value: '500' }];

		// Set the dimensions of the canvas / graph
		var margin = {top: 30, right: 20, bottom: 40, left: 50},
			width = 600 - margin.left - margin.right,
			height = 370 - margin.top - margin.bottom;
		
		// Parse the date / time
		var parseDate = d3.time.format("%Y-%m").parse;
		
		// Set the ranges
		var x = d3.time.scale().range([0, width]);
		var y = d3.scale.linear().range([height, 0]);
		
		// Define the axes
		var xAxis = d3.svg.axis().scale(x)
			.orient("bottom").tickFormat(d3.time.format("%m"));
		var yAxis = d3.svg.axis().scale(y)
			.orient("left").ticks(5);
		
		// Define the line
		var valueline = d3.svg.line()
			.interpolate("basis") //smoothens the line
			.x(function(d) { return x(d.date); })
			.y(function(d) { return y(d.value); });
		
		// Adds the svg canvas
		var svg = d3.select("body")
			.append("svg")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom)
				.attr("id", "svg01")
			.append("g")
			.	attr("transform",
					"translate(" + margin.left + "," + margin.top + ")");

// ADDED THIS ////////////////////////
svg.append("defs").append("clipPath")
.attr("id", "clip")
  .append("rect")
.attr("width", width)
.attr("height", height);
/////////////////////////////////////
		
		// Get the data
		dataSet.forEach(function (d) {
			d.date = parseDate(d.date);
			d.value = +d.value;
		});

		// Scale the range of the data
		x.domain(d3.extent(dataSet, function (d) { return d.date; }));
		y.domain([200, d3.max(dataSet, function (d) { return d.value; })]);

		// Add the valueline path.
		svg.append("path")
// AND THIS ////////////////////////////////
.attr("clip-path", "url(#clip)")
///////////////////////////////////////////
			.attr("class", "line")
			.attr("d", valueline(dataSet));

		// Add the X Axis
		svg.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(0," + height + ")")
			.call(xAxis);

		// Add the Y Axis
		svg.append("g")
			.attr("class", "y axis")
			.call(yAxis);

body {
  font: 12px Arial;
}
path {
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}
.axis path,
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>