text - d3 动态文本循环

Question

我有一个名为 keys 的数组[1:"XXX",2:"YYY"]，并且页面上已经有 2 个 svg 元素。我希望每个元素都有一个数组值，但下面的代码将两个值都放在每个文本标签中。我试过了keys[i]，但i未定义。我怎样才能做到这一点？

svg.selectAll("svg").
data(keys).
enter()
    .append("svg:text")
         .attr("x", width )
         .attr("y", height).
         .attr("dx", -width/2)
         .attr("text-anchor", "middle")
         .attr("style", "font-size: 12; font-family: Helvetica, sans-serif")
         .text(function(keys) { return keys;})
         .attr("transform", "translate(0, 18)")
         .attr("class", "yAxis");

Answer 1

文本函数参数使用名称keys。改为尝试d：

svg.selectAll("svg")
.data(keys)
.enter()
.append("svg:text")
  .attr("x", width )
  .attr("y", height).
  .attr("dx", -width/2)
  .attr("text-anchor", "middle")
  .attr("style", "font-size: 12; font-family: Helvetica, sans-serif")
  .text(function(d) { return d;})
  .attr("transform", "translate(0, 18)")
  .attr("class", "yAxis");

attrand方法的参数text是一个函数，它接受一个数据元素并使用它的值来计算属性或文本值。keys您正在使用具有两个元素的全局变量的值。