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

Question

我试图在这里绘制一个非常基本的图表。我想要实现的目标有点像这样:

每个“子图”包含 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; })

根据文档/教程，我希望它创建一个分割，但它似乎完全忽略 .selectAll(".chart__graph") 。如果我手动.append() div，那么它会为每个不需要的运行创建分割。为了实现我想要的 div 结构，我缺少什么？另外，selectAll() 实际上做了什么？

请不要介意重复的代码，暂时让我了解 D3.js 语法。

Answer 1

您必须在 Enter 中附加带有类 chart__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")
...