D3文本锚无法附加

Question

var w = 300;
var h = 150;
var padding = 2;
var dataset =[5, 10, 15, 20, 25];
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);

function colorPicker(v){
  if (v<=20) { return "#666666"; }
  else if (v>20) { return "#FF0033"; }
}

svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) { return (i*(w/dataset.length)); })
.attr("y", function(d) { return h-(d*4); })
.attr("width", w/dataset.length-padding)
.attr("height", function(d) { return d*4;})
.attr("fill", function(d){
  return colorPicker(d);
});

svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {return d; })
.attr({"text-anchor": "middle"})
.attr({
  x: function(d, i) {return i* (w / dataset.length);},
  y: function(d) {return h - (d*4); }
});

我正在关注D3.js教程，我试图让文本锚点工作，但它不会附加。没有文字出现，任何人都可以对我做错的事情有所了解吗？ 它应该显示每个矩形上方的数字

Answer 1

在 new （实际上不是新的）V4.x版本中，您无法使用对象来设置attr()方法。

除此之外，您还有另一个问题，即避免要呈现的文本：数据集中没有value属性（这只是一个数字数组）。因此，它应该是：

.text(function(d){return d})

以下是您的代码，其中包含必要的更改：

＆＃13;

＆＃13;

var w = 300;
var h = 150;
var padding = 2;
var dataset = [5, 10, 15, 20, 25];
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

function colorPicker(v) {
  if (v <= 20) {
    return "#666666";
  } else if (v > 20) {
    return "#FF0033";
  }
}

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return (i * (w / dataset.length));
  })
  .attr("y", function(d) {
    return h - (d * 4);
  })
  .attr("width", w / dataset.length - padding)
  .attr("height", function(d) {
    return d * 4;
  })
  .attr("fill", function(d) {
    return colorPicker(d);
  });

svg.selectAll("text")
  .data(dataset)
  .enter()
  .append("text")
  .attr("text-anchor", "middle")
  .text(function(d) {
    return d;
  })
  .attr("x", function(d, i) {
    return i * (w / dataset.length) + ((w / dataset.length - padding) / 2);
  })
  .attr("y", function(d) {
    return h - (d * 4);
  });

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

＆＃13;

＆＃13;