Question

嗨，我刚刚开始学习d3.js，但是我遇到了问题，如何将每一行组合在一起？

让我们假设我有一个简单的数组，我想创建2个组，第一个组在0,1位置包含元素，第二个组在2,3位置包含元素。

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

let myData = [{
    x: 30,
    y: 40
  },
  {
    x: 50,
    y: 70
  },
  {
    x: 70,
    y: 80
  },
  {
    x: 90,
    y: 90
  }
];

var circleSelect = svgViewport.selectAll("circle").data(myData);

var circles = circleSelect.enter().append("circle");

circles
  .attr("cx", (d) => {
    return d.x
  })
  .attr("cy", (d) => {
    return d.y
  })
  .attr("r", 10);

我也尝试给每个人上一堂课，但在这种情况下，按班级名称选择时遇到了问题

for (let i = 0; i < 2; i++) {
  for (let j = 0; j < 2; j++) {
    svgViewport.append("g")
      .append("circle")
      .attr("class", i);
  }
}

Answer 1

首先，请勿不要使用for循环在D3代码中附加元素。我们确实使用了for循环（和类似的方法），但是在非常特殊的情况下。解释如何重构第二个片段需要一个新的答案（在S.O.，每个帖子我们只保留一期）。

如果我正确理解了您的问题，则按 group 表示<g>个元素。在这种情况下，您应该根据所需的组来分离数据（在内部阵列中）。例如：

let myData=[[{x:30,y:40},{x:50,y:70}],
    [{x:70,y:80},{x:90,y:90}]
];

这是一个演示，仅使用输入选择：

const svgViewport = d3.select("body")
  .append("svg")
  .attr("width", 150)
  .attr("height", 150);

let myData = [
  [{
      x: 30,
      y: 40
    },
    {
      x: 50,
      y: 70
    }
  ],
  [{
      x: 70,
      y: 80
    },
    {
      x: 90,
      y: 90
    }
  ]
];

const groups = svgViewport.selectAll(null)
  .data(myData)
  .enter()
  .append("g");

const circles = groups.selectAll(null)
  .data(d => d)
  .enter()
  .append("circle")
  .attr("cx", (d) => d.x)
  .attr("cy", (d) => d.y)
  .attr("r", 10);

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

这将生成以下结构：

<svg width="150" height="150">
  <g>
    <circle cx="30" cy="40" r="10"></circle>
    <circle cx="50" cy="70" r="10"></circle>
  </g>
  <g>
    <circle cx="70" cy="80" r="10"></circle>
    <circle cx="90" cy="90" r="10"></circle>
  </g>
</svg>

如何按行分组元素？

1 个答案: