D3JS:无法使条形图在调整大小时做出响应

Question

我正在实现一个代码，其中 svg 容器的宽度在调整大小时适应屏幕。奇怪的是，尽管我对 x 轴使用相同的比例来根据数据(年(构建条形，但它们不会沿着 x 轴的宽度移动，而是在调整大小时离开视口。任何找出我做错了什么的建议将不胜感激。我将留下一个运行片段，以便您可以看到代码和当前行为。我还想知道如何移动年份刻度，使它们不是从 Y 轴开始，而是向右留出一些空间，以便更好地可视化。谢谢

var data = [
	{year: 2000, population: 1192},
	{year: 2001, population: 1234},
	{year: 2002, population: 1463},
	{year: 2003, population: 1537},
	{year: 2004, population: 1334},
	{year: 2005, population: 1134},
	{year: 2006, population: 1234},
	{year: 2007, population: 1484},
	{year: 2008, population: 1562},
	{year: 2009, population: 1427},
	{year: 2010, population: 1325},
	{year: 2011, population: 1484},
	{year: 2012, population: 1661},
	{year: 2013, population: 1537},
	{year: 2014, population: 1334},
	{year: 2015, population: 1134},
	{year: 2016, population: 1200}
];
var parseDate = d3.timeParse("%Y");
function type(dataArray) {
	dataArray.forEach(function(d) {
		d.year = parseDate(d.year);
		d.retention = +d.population;
	});
	return dataArray;
}
data = type(data);
var margin = {top: 30, right: 20, bottom: 30, left: 50},
height = 500 - margin.top - margin.bottom;
var xScale = d3.scaleTime();
var yScale = d3.scaleLinear().range([height, 0]);
var xAxis = d3.axisBottom().scale(xScale);
var yAxis = d3.axisLeft().scale(yScale);

var svg = d3.select("body")
.append("svg")
		.attr("height", height + margin.top + margin.bottom);
var artboard = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
xScale.domain(d3.extent(data, function(d) { return d.year; }));
yScale.domain([
		d3.min(data, function(d) { return d.population - 200 }), 
		d3.max(data, function(d) { return d.population + 200 })
	]);

var xAxisEl = artboard.append("g")
		.attr("transform", "translate(0," + height + ")");
var yAxisEl = artboard.append("g")
		.call(yAxis);
function drawChart() {
	width = parseInt(d3.select('body').style('width'), 10) - margin.left - margin.right;
	
	svg.attr("width", width + margin.left + margin.right);
	xScale.range([0, width]);
	
	xAxis.scale(xScale);
	
	xAxisEl.call(xAxis);
	
	var rects = svg.selectAll("rect")
		.attr("class","rects2")
		.data(data)
		.enter()
		.append("rect")
		.attr("fill","#BC204D")
	
	
		rects.attr("y", function(d) {
			return height - yScale(d.population)
		})
		 .attr("height", 0)
		.transition()
		.duration(1000)
		.attr("height", function(d) {
				return yScale(d.population);
		  })
		.attr("width", 10)
		.attr("transform", function (d, i) {
			 return "translate(" + (xScale(d.year) + margin.left)   + "," + margin.bottom + ")"
		})
		.attr("fill","#00338D")
}
drawChart();
		
window.addEventListener('resize', drawChart);
	

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

Answer 1

更新时需要使用合并函数。查看此内容以获取更多信息 更新模式

您可以使用axis.tickPadding("10")填充刻度值

var data = [
	{year: 2000, population: 1192},
	{year: 2001, population: 1234},
	{year: 2002, population: 1463},
	{year: 2003, population: 1537},
	{year: 2004, population: 1334},
	{year: 2005, population: 1134},
	{year: 2006, population: 1234},
	{year: 2007, population: 1484},
	{year: 2008, population: 1562},
	{year: 2009, population: 1427},
	{year: 2010, population: 1325},
	{year: 2011, population: 1484},
	{year: 2012, population: 1661},
	{year: 2013, population: 1537},
	{year: 2014, population: 1334},
	{year: 2015, population: 1134},
	{year: 2016, population: 1200}
];
var parseDate = d3.timeParse("%Y");
function type(dataArray) {
	dataArray.forEach(function(d) {
		d.year = parseDate(d.year);
		d.retention = +d.population;
	});
	return dataArray;
}
data = type(data);
var margin = {top: 30, right: 20, bottom: 30, left: 50},
height = 500 - margin.top - margin.bottom;
var xScale = d3.scaleTime();
var yScale = d3.scaleLinear().range([height, 0]);
var xAxis = d3.axisBottom().scale(xScale);
var yAxis = d3.axisLeft().scale(yScale).tickPadding("10");

var svg = d3.select("body")
.append("svg")
		.attr("height", height + margin.top + margin.bottom);
var artboard = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
xScale.domain(d3.extent(data, function(d) { return d.year; }));
yScale.domain([
		d3.min(data, function(d) { return d.population - 200 }), 
		d3.max(data, function(d) { return d.population + 200 })
	]);

var xAxisEl = artboard.append("g")
		.attr("transform", "translate(0," + height + ")");
var yAxisEl = artboard.append("g")
		.call(yAxis);
function drawChart() {
	width = parseInt(d3.select('body').style('width'), 10) - margin.left - margin.right;
	
	svg.attr("width", width + margin.left + margin.right);
	xScale.range([0, width]);
	
	xAxis.scale(xScale);
	
	xAxisEl.call(xAxis);
	
	var rects = svg.selectAll("rect")
		.attr("class","rects2")
		.data(data);
		
		rects.enter()
		.append("rect")
		.attr("fill","#BC204D").attr("y", function(d) {
			return height - yScale(d.population)
		 }).merge(rects)
		 .attr("height", 0)
		.transition()
		.duration(1000)
		.attr("height", function(d) {
				return yScale(d.population);
		  })
		.attr("width", 10)
		.attr("transform", function (d, i) {
			 return "translate(" + (xScale(d.year) + margin.left)   + "," + margin.bottom + ")"
		})
		.attr("fill","#00338D");
rects.exit().remove();
}
drawChart();
		
window.addEventListener('resize', drawChart);

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