Javascript d3.js创建和输入元素的意外行为

我试图在这里绘制一个非常基本的图形。我想要实现的是这样一点：

每个“子图”包含4个数据点

所需的结构是：

 .chart
  .chart__graph
    .chart__graph__exp1
    .chart__graph__exp2
    .chart__graph__opt
    .chart__graph__min
  .chart__graph
    .chart__graph__exp1
    .chart__graph__exp2
    .chart__graph__opt
    .chart__graph__min
  .chart__graph
    ....

这是我的方法：

    var data = [
        {
            minimum: 4,
            optimum: 7,
            company: 6,
            competitor: 6
        },
        {
            minimum: 2,
            optimum: 4,
            company: 4,
            competitor:3
        },
        {
            minimum: 3,
            optimum: 7,
            company: 6,
            competitor: 3
        }
    ]

    d3.select(".chart").selectAll(".chart__graph")
        .data(data)
        .enter()
        .append("div").attr("class", "chart__graph__min").html(function(d) { return d.minimum; });
    d3.select(".chart").selectAll(".chart__graph")
        .data(data)
        .enter()
        .append("div").attr("class", "chart__graph__exp1").html(function(d) { return d.company; })
    d3.select(".chart").selectAll(".chart__graph")
        .data(data)
        .enter()
        .append("div").attr("class", "chart__graph__exp2").html(function(d) { return d.competitor; })
    d3.select(".chart").selectAll(".chart__graph")
        .data(data)
        .enter()
        .append("div").attr("class", "chart__graph__opt").html(function(d) { return d.optimum; })

根据文档/教程，我希望它能创建一个subdiv，但它似乎忽略了。 如果I

.append（）。
我缺少什么来实现我想要的div结构？
另外，
selectAll（）
实际上做什么

请不要介意重复的代码，现在就试着用D3.js语法来概括我的想法。
您必须在enter中用class
chart\uu graph
附加
div
，然后创建子div

var chart_graph_ent = d3.select(".chart").selectAll(".chart__graph")
    .data(data)
    .enter()
    .append("div").attr("class", "chart__graph")
chart_graph_ent.append("div").attr("class", "chart__graph__min")
...

与此相反：

d3.select(".chart").selectAll(".chart__graph")//this is a wrong selection
        .data(data)
        .enter()
        .append("div").attr("class", "chart__graph__opt")

应该是的

d3.select(".chart").selectAll(".chart__graph__opt")
        .data(data)
        .enter()
        .append("div").attr("class", "chart__graph__opt")

这是做什么的：

1） 
d3.选择（“.chart”）//这将选择具有类图表的DOM

2） 
d3.选择（“.chart”）.selectAll（“.chart\uuuu graph\uuuu opt”）

这将返回class
“.chart”
选项中class
chart\uu graph\uu opt
元素的选择。最初，这将是空的选择

(三)

(四)

对于数据集中的每个数据，新的div将附加类“chart\uuuu graph\uuuu opt”（与所选内容相同）

希望这能消除一些顾虑。
“selectAll”通过标记名“.chart\u graph”选择节点，d3尝试将新节点附加到“.chart”对象中。
谢谢，这是最简单的方法。不幸的是，子div（“.chart\uuuu graph\uuuuu opt”）现在没有显示在其父容器（“.chart\uuu graph”）中，而是紧挨着彼此显示。您可以调整一下示例吗？这正是我想要的！谢谢！
//to this selection set the data and call enter
    d3.select(".chart").selectAll(".chart__graph__opt")
                .data(data)
                .enter()

d3.select(".chart").selectAll(".chart__graph__opt")
        .data(data)
        .enter()
        .append("div").attr("class", "chart__graph__opt")