Question

我现在正在尝试制作简单的图表，以从CSV导入数据。除标签外，图表上的所有内容均正常运行。在元素检查中，我可以看到它们已被附加，并且它们的x和y坐标甚至正确，但是由于某些原因，它们都被困在SVG本身的左上角。

起初我尝试更改x放置函数，因为我认为它只是没有给标签提供x位置，但是在进一步检查后，标签具有正确的元数据。

//Graph Dimensions
var margin = {top: 20, right: 20, bottom: 30, left: 40},
   width = 1000 - margin.left - margin.right,
   height = 500 - margin.top - margin.bottom;

//Set Ranges
var x_scale = d3.scaleBand()
      .range([0, width])
      .padding(0.1);
var y_scale = d3.scaleLinear()
      .range([height, 0]);

//Create SVG object
var svg = d3.select('#chart')
   .append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g")
   .attr("transform", 
     "translate(" + margin.left + "," + margin.top + ")");

//Retrieve data
d3.csv('sales.csv').then(function(data){

//Set domains based on data
x_scale.domain(data.map(function(d) { return d.month; }));
y_scale.domain([0, d3.max(data, function(d) { return d.sales; })]);

//Create bars
svg.selectAll("rect")
   .data(data)
   .enter().append("rect")
   .attr("class", "bar")
   .attr("x", function(d) { return x_scale(d.month); })
   .attr("width", x_scale.bandwidth())
   .attr("y", function(d) { return y_scale(d.sales); })
   .attr("height", function(d) { return height - y_scale(d.sales); });

//Create labels
svg.selectAll('text')
  .data(data)
  .enter().append('text')
  .attr('class', 'label')
  .attr("x", function(d) { return x_scale(d.month); })
  .attr("y", function(d) { return y_scale(d.sales); })
  .attr( 'font-size', 14 )
  .attr( 'fill', '#555555' )
  .attr( 'text-anchor', 'middle' );

//Add Axes
svg.append("g") //X Axis
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x_scale));

svg.append("g") //Y Axis
   .call(d3.axisLeft(y_scale));
})

我要寻找的唯一标签是实际显示的标签。以后如有需要，我可以更改其位置。

条形图标签卡在左上角

0 个答案: