Question

我有一个包含数据对象的简单数组，我从中生成div。我想创建几个div，而不是为每个数据元素只创建一个div，这取决于数据中出现的数字（作为对象属性之一）。

例如，如果数据元素的“num”为4，则将生成4个div。

以下是我对此部分的代码：

data = [
  {num: 4, category: 'A'},
  {num: 3, category: 'B'},  
  {num: 2, category: 'D'},  
  {num: 5, category: 'A'}    
]

d3.select('body')
  .selectAll('div')
  .data(data)
  .enter()
  .append('div')
  .text((d)=> d.num)
  .style('width', (d) => d.num * 20 + "px")

我试图用for循环解决它，但我不确定如何在d3选择的中间循环，同时仍然可以访问数据。

任何想法都会非常感激！

Answer 1

我是这样做的：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <script>
    data = [{
      num: 4,
      category: 'A'
    }, {
      num: 3,
      category: 'B'
    }, {
      num: 2,
      category: 'D'
    }, {
      num: 5,
      category: 'A'
    }]

    d3.select('body')
      .selectAll('div')
      .data(data) // bind our data
      .enter()
      // inner selection
      .selectAll('div')
      // inner selection data binding
      // creates array of repeating datum that is length of num
      .data((d) =>
        d3.range(d.num).map(() => d)
      ) 
      .enter()
      .append('div')
      .text((d) => d.num)
      .style('width', (d) => d.num * 20 + "px");
  </script>
</body>

</html>

在D3中，如何根据数据中的值为每个数据元素创建多个元素？

1 个答案: