Question

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

dice

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);

Answer 1

更新时需要使用合并功能。签出更多信息Update Pattern

您可以使用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>

D3JS：无法制作条形图以响应调整大小

1 个答案: