D3.js：创建固定数量的元素

Question

我正在尝试使用 D3 创建固定数量的元素，并从 json 文件中获取该值。这意味着，如果给定的 json 数据是 n，我想将 n 元素打印到我的 svg 中。

这是我的代码：

    // Defining the size of the svg element
    var w = 1000;
    var h = 50;

    // Defining the dataset
    d3.json("people.json", function(dataset) {

    // Iterating through the json
    for(var i=0; i<dataset.length; i++) {

                var svg = d3.select("body").append("svg")
                    .attr("width", w)
                    .attr("height", h);

            // Iterating through the value
            for(var j=0; j<dataset[i].age; j++) {

                svg.selectAll("rect")
                        .data(dataset)
                        .enter()
                        .append("rect")
                        .attr("width", 20)
                        .attr("height", 20)
                        .attr("x", function(d, j) { return j * 55 })
            }

        }

    });

这是我的 json 示例文件（年龄的完全随机值）：

  [{
    "name": "Larry",
    "last": "Page",
    "country": "USA",
    "city": "Mountain View",
    "age": 32
  }, {
    "name": "Sergey",
    "last": "Bean",
    "country": "USA",
    "city": "Mountain View",
    "age": 37
  }, {
    "name": "Bill",
    "last": "Gates",
    "country": "USA",
    "city": "Seattle",
    "age": 60
  }, {
    "name": "Mark",
    "last": "Zuckemberg",
    "country": "USA",
    "city": "Palo Alto",
    "age": 35
  }, {
    "name": "Sergio",
    "last": "Marchionne",
    "country": "Italy",
    "city": "Milan",
    "age": 65
  }
]

我的预期结果应该是这样的（[-] --> svg rectangle）

1. 拉里·佩奇： [-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][- ][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-]

2. 谢尔盖·比恩： [-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][- ][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][ -][-]

等等……

你能帮我理解我做错了什么吗？

谢谢！

Answer 1

纯粹的 D3 方法根本不需要 for 循环（就像 Gerardo Furtado 在他的 comment 中提到的那样），并且将类似于以下内容：

d3.select("body").selectAll("svg")
  .data(dataset)              // Bind the entire dataset
  .enter().append("svg")      // Append one svg per object in dataset
  .selectAll("rect")
    .data(function(d) {       // Inherit data from svg by mapping of objects
      // Create an array of number of required rects
      return d3.range(d.age).map(function(d) { return d*15; }); 
    })
    .enter().append("rect")   // Append rects per svg
      .attr("x", function(d) {
        return d;             // Position was calculated in above mapping in data()
      });

这就是绘制您所追求的图形所需的全部内容（属性放在一边）。有关设置所有值的完整示例，请查看以下示例：

var dataset =   [{
    "name": "Larry",
    "last": "Page",
    "country": "USA",
    "city": "Mountain View",
    "age": 32
  }, {
    "name": "Sergey",
    "last": "Bean",
    "country": "USA",
    "city": "Mountain View",
    "age": 37
  }, {
    "name": "Bill",
    "last": "Gates",
    "country": "USA",
    "city": "Seattle",
    "age": 60
  }, {
    "name": "Mark",
    "last": "Zuckemberg",
    "country": "USA",
    "city": "Palo Alto",
    "age": 35
  }, {
    "name": "Sergio",
    "last": "Marchionne",
    "country": "Italy",
    "city": "Milan",
    "age": 65
  }
];

// Defining the size of the svg element
var w = 1000;
var h = 50;

// Defining the dataset
//d3.json("people.json", function(dataset) {

  d3.select("body")
    .selectAll("svg")
    .data(dataset)              // Bind the entire dataset
    .enter().append("svg")      // Append one svg per object in dataset
      .attr("width", w)
      .attr("height", h)
    .selectAll("rect")
      .data(function(d) {       // Inherit data from svg by mapping of objects
        // Create an array of number of required rects
        return d3.range(d.age).map(function(d) { return d*15; }); 
      })
      .enter().append("rect")   // Append rects per svg
        .attr("width", 10)
        .attr("height",10)
        .attr("x", function(d) {
          return d;             // Position was calculated in above mapping in data()
        });


//});

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

Answer 2

你可以这样做：

var dataset = [{
  "name": "Larry",
  "last": "Page",
  "country": "USA",
  "city": "Mountain View",
  "age": 32
}, {
  "name": "Sergey",
  "last": "Bean",
  "country": "USA",
  "city": "Mountain View",
  "age": 37
}, {
  "name": "Bill",
  "last": "Gates",
  "country": "USA",
  "city": "Seattle",
  "age": 60
}, {
  "name": "Mark",
  "last": "Zuckemberg",
  "country": "USA",
  "city": "Palo Alto",
  "age": 35
}, {
  "name": "Sergio",
  "last": "Marchionne",
  "country": "Italy",
  "city": "Milan",
  "age": 65
}];

// Defining the size of the svg element
var w = 1000;
var h = 500;
var itemH = 10;
var itemW = 3;
var padding = 2;


// Append svg element
var svg = d3.select("body").append("svg")
  .attr("width", w)
  .attr("height", h);

// Append groups for each in dataset
var group = svg.selectAll("g")
  .data(dataset)
  .enter()
  .append('g');

// Each group
group.each(function(d, i) {

  //console.log(d);
  var age = d.age;

  var self = d3.select(this);

  // Transform the group in Y
  self.attr('transform', function() {
    return 'translate(0,' + (i * (itemH + padding)) + ')';
  });

  // Append rect forEach from 0 - age
  d3.range(age).forEach(function(i) {
    //console.log(i);

    self.append('rect')
      .attr('width', itemW)
      .attr('height', itemH)
      .attr('x', function() {
        return i * (itemW + padding);
      });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


<body></body>