Question

我已经收集了不同问卷的数据，现在我将使用d3将其可视化以进行详细检查。问题是当我使用条形图可视化特定数据的百分比值时，会正确绘制图形，但是当我尝试将特定实体的值写入条形本身时，第一个条形值不会打印在条形本身上。我不明白哪里做错了。请帮忙。这是我的代码

var margin = {top: 50, right: 50, bottom: 50, left: 50}
  , width = window.innerWidth - margin.left - margin.right // Use the window's width 
  , height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

// set the ranges
var x = d3.scaleBand()
          .range([0, width])
          .padding(0.1);
var y = d3.scaleLinear()
          .range([height, 0]);

var svg = d3.select("body").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 + ")");

// get the data
d3.csv("Data_vis.csv", function(error, data) {


  var data=[{"salesperson":'Male', "sales": 55},
            {"salesperson":'Female', "sales": 38.75},
            {"salesperson":'White', "sales": 30.63},   
            {"salesperson":'Latino', "sales": 15.50},
            {"salesperson":'Black', "sales": 22.88},
            {"salesperson":'Native', "sales": 1.85},
            {"salesperson":'Asian', "sales": 13.28}];

  data.forEach(function(d) {
    //alert(d.sales);
    d.sales = +d.sales;

  });


  svg.append("text")
       .attr("transform", "translate(100,0)")
       .attr("x", 50)
       .attr("y", 50)
       .attr("font-size", "24px")
       .text(heading)

  x.domain(data.map(function(d) { return d.salesperson; }));
  y.domain([0, d3.max(data, function(d) { return d.sales; })]);


  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
     .attr("class", "bar")
      .attr("x", function(d) { return x(d.salesperson); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.sales); })
      .attr("height", function(d) { return height - y(d.sales); });


  svg.selectAll("text")
   .data(data)
   .enter()
   .append("text")
 .text(function(d) {

 var sal=d.sales;
 sal = sal.toFixed(2);
        return sal;
   })
.attr("x", function(d, i) {
        return i * (width / data.length) + 5;  // +5
   })
   .attr("y", function(d) {
        //alert(d);
        return height - (d.sales * 4) + 15;              // +15
   }); 




  // add the x Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // add the y Axis
  svg.append("g")
      .call(d3.axisLeft(y));

});

任何帮助将不胜感激。谢谢

Answer 1

执行此操作时：

svg.append("text")
   .attr("transform", "translate(100,0)")
   .attr("x", 50)
   .attr("y", 50)
   .attr("font-size", "24px")
   .text(heading)

您要向SVG附加一个<text>元素（和svg选择）。到目前为止，一切都很好。

现在来了：

svg.selectAll("text")
    .data(data)
    .enter()
    //etc...

这就是发生的情况：在选择所有<text>元素时，实际上是在选择我们提到的第一个元素并将其绑定数据。因此，您的回车选择包含n - 1个元素。

要获得更好的解释，请在此处查看我的解释：Selecting null: what is the reason behind 'selectAll(null)' in D3.js?

解决方案：什么都不做...

svg.selectAll(null)
    .data(data)
    .enter()
    //etc...

...，或者，如果您打算进行更新选择，请按给定的类别进行选择。

创建条形图时缺少第一个值

1 个答案: