D3.js 如何在D3中的单个数据迭代中绘制多个项目？

我正在使用d3.js，需要一些关于数据使用的帮助。 我有一个与d3绑定的数据数组，并在绘图中渲染元素。 但是，每个绘图项都有多个部分，如起始点、线和结束点，如下所示：

---

现在，我正在为每个项目绑定多次数据，步骤如下：

绑定数据数组

渲染所有起始点

绑定数据数组

渲染所有线点

绑定数据数组

渲染所有结束点

此方法中的问题是渲染顺序。如果一个打印项目呈现在另一个打印项目上，则第一个项目的结束点将呈现在第二个打印项目的行上。另一个问题是，如果我想操纵一个绘图项，跟踪单个绘图项的所有位和段是有问题的，因为它们在绘图中没有语法上的关联

现在我的问题是，有没有办法将数据绑定一次并将所有元素（起始点、线和结束点）呈现在一起？这样渲染的顺序就正确了？（在这种情况下，第二个打印项目的所有元素将呈现在第一个打印项目上）

---

我会做和数据一样多的组，每个组我都会做直线和矩形。这将解决重叠问题和多数据绑定问题

var groups = PlotGroup.selectAll(".mygroup")
                             .data(EventList)
                             .enter()
                             .append("g")
                             .classed("mygroup", true);
              //make line in the group

              groups.append("line")
              .attr("class", "Line gline")
              .attr("x1", function (d) {
                   return XScale(d.startTime);
               })
              .attr("y1", (_Position))
              .attr("x2", function (d) {
                return XScale(d.endTime);
               })
              .attr("y2", (_Position))

              //make in rectangle
               groups.append("rect")
               .attr("class", "RectIn")
               .attr("x", function (d) {
                   return XScale(d.startTime);
                })
               .attr("y", function (d) {
                   return _Position;
                })
               .attr("width", 16)
               .attr("height", 16);

               //make out rectangle
                groups.append("rect")
                .attr("class", "RectOut")
                .attr("x", function (d) {
                    return XScale(d.endTime);
                 })
                .attr("y", function (d) {
                    return _Position;
                 })
                 .attr("width", 16)
                 .attr("height", 16)

---

希望这有帮助

太棒了！我今天就试试。这是我的名片。它没有按预期工作。知道了！enter（）已丢失。：）是的，进不见了，出也不见了

var lineSelection = PlotGroup.selectAll(".Line")
                             .data(EventList);
lineSelection .enter()
              .append("line")
              .attr("class", "Line gline")
              .attr("x1", function (d) {
                   return XScale(d.startTime);
               })
              .attr("y1", (_Position))
              .attr("x2", function (d) {
                return XScale(d.endTime);
               })
              .attr("y2", (_Position));

var RectInSelection = PlotGroup.selectAll(".RectIn")
                               .data(EventList);

RectInSelection.enter()
               .append("rect")
               .attr("class", "RectIn")
               .attr("x", function (d) {
                   return XScale(d.startTime);
                })
               .attr("y", function (d) {
                   return _Position;
                })
               .attr("width", 16)
               .attr("height", 16);

var RectOutSelection = PlotGroup.selectAll(".RectOut")
                                .data(EventList);

RectOutSelection.enter()
                .append("rect")
                .attr("class", "RectOut")
                .attr("x", function (d) {
                    return XScale(d.endTime);
                 })
                .attr("y", function (d) {
                    return _Position;
                 })
                 .attr("width", 16)
                 .attr("height", 16);

var groups = PlotGroup.selectAll(".mygroup")
                             .data(EventList)
                             .enter()
                             .append("g")
                             .classed("mygroup", true);
              //make line in the group

              groups.append("line")
              .attr("class", "Line gline")
              .attr("x1", function (d) {
                   return XScale(d.startTime);
               })
              .attr("y1", (_Position))
              .attr("x2", function (d) {
                return XScale(d.endTime);
               })
              .attr("y2", (_Position))

              //make in rectangle
               groups.append("rect")
               .attr("class", "RectIn")
               .attr("x", function (d) {
                   return XScale(d.startTime);
                })
               .attr("y", function (d) {
                   return _Position;
                })
               .attr("width", 16)
               .attr("height", 16);

               //make out rectangle
                groups.append("rect")
                .attr("class", "RectOut")
                .attr("x", function (d) {
                    return XScale(d.endTime);
                 })
                .attr("y", function (d) {
                    return _Position;
                 })
                 .attr("width", 16)
                 .attr("height", 16)