Question

我是d3.js的新手，正在尝试绘制条形图。条形图中与x轴有关的“刻度”值未显示

样本数据

year    running_total
1949    5
1950    11
1953    15
1954    29
1955    57
1956    70
1957    90
1958    136
1959    140
1960    143

我希望数据中的每三年显示一次刻度。

    <!DOCTYPE html>
<head>
 <meta charset="utf-8">
  <script  type="text/javascript" src="lib/d3/d3.min.js"></script>
  <script  type="text/javascript" src="lib/d3-dsv/d3-dsv.min.js"></script>
  <script  type="text/javascript" src="lib/d3-fetch/d3-fetch.min.js"></script>
  
   <title> 	Lego Sets by Year from Rebrickable 	</title>
   <style>
		.bar {
            fill: steelblue;
        }
	</style>

 
</head>

<body>
	<svg width="1500" height="600"> </svg>

  <script>
	
	var parseTime = d3.timeParse("%Y");
	  
	/* Step 1: Create the SVG and define the scales for chart */
	
	/* Create a SVG element with width of 1000px and height of 600px */
	
	var svg = d3.select("svg"),
        margin = 200,
        width = svg.attr("width") - margin,
        height = svg.attr("height") - margin;
		
	/* Add labels to the chart */ 
		svg.append("text")
	   .attr("transform", "translate(100,0)")
	   .attr("x", 50)
	   .attr("y", 50)
	   .attr("font-size", "30px")
	   .text("Lego Sets by Year from Rebrickable")

	/* Create Scale for X and Y Axis */
	
    var xscale = xScale = d3.scaleBand().range ([0, width]).padding(0.3),
        yScale = d3.scaleLinear().range ([height, 0]);
	
	/* Define the group element g to which the axes and bars will be added */
	
    var g = svg.append("g")
               .attr("transform", "translate(" + 100 + "," + 100 + ")");
			   
	/* Step 2: Load the CSV into the array and add axes to the SVG */ 
	
	/* Loading from the csv into array is an asynchronous function and in D3-v5, it is promise based */ 
	
	d3.csv("q3.csv").then(function(data) {
			data.forEach(function(d) {
			d.year = parseTime(d.year).getFullYear()
			d["running_total"] = +d["running_total"];
		});	
		console.log(data);
		
		startYear = d3.min(data, function(d) {return d.year; })
		endYear = d3.max(data, function(d) {return d.year; }) 
		console.log(startYear, endYear );
		
	/* Adding loaded domain values to x and Y scales */ 		
		 xScale.domain(data.map(function(d) { return d.year;}));
		/*xScale.domain(d3.extent(data, function(d) {return d.year; }));*/
		yScale.domain([0, d3.max(data, function(d) { return d.running_total; })]);
		
	/* Adding X axes to the SVG using the call function to the bottom of the SVG */		
	/* Append the following text to X-axis group */
	  g.append("g")
	 .attr("transform", "translate(0," + height + ")") 
	 .call(d3.axisBottom(xScale) .tickValues(startYear, endYear, 3 ))   
     .append("text")
	 .attr("y", height - 250)
	 .attr("x", width - 100)
	 .attr("text-anchor", "end")
	 .attr("stroke", "black")
	 .text("Year"); 
		
	
		
	/* Adding Y axes to the SVG using the call function to the left of the SVG  */	
	/* Append the following text to Y-axis group */
	 g.append("g")
	 .call(d3.axisLeft(yScale)
	 .tickFormat(function(d){
		 return d;
	 }).ticks(15))
	 .append("text")
	 .attr("transform", "rotate(-90)")
	 .attr("y", 6)
	 .attr("dy", "-5.1em")
	 .attr("text-anchor", "end")`enter code here`
	 .attr("stroke", "black")
	 .text("Running Total");
						
	/* Step : 3  Create the Bars corresponding to data values by fixing the width of the chart and bar width will be variable depending on dataset  */				
	g.selectAll(".bar")
	 .data(data)
	 .enter().append("rect")
	 .attr("class", "bar")
	 .attr("x", function(d) { return xScale(d.year);})
	 .attr("width", xScale.bandwidth()) 
	 .attr("y", function(d) { return yScale(d.running_total);})
	 .attr("height", function(d) { return height - yScale(d.running_total);});

	});	 

  </script>
</body>

x轴的刻度值未显示

0 个答案: