Javascript D3.js多维数组

我刚刚开始学习D3.js，它很棒，但是学习曲线很陡。 我有以下代码

var local = d3.local();

var data2 = [
  {
    id: 1,
    name: "reg1",
    movements: [
      {
        id: 1,
        text: "mov1",
        start: new Date(2017, 1, 1, 17, 0, 0, 0),
        end: new Date(2017, 1, 1, 17, 30, 0, 0)
      },
      {
        id: 2,
        text: "mov2",
        start: new Date(2017, 1, 1, 16, 0, 0, 0),
        end: new Date(2017, 1, 1, 16, 30, 0, 0)
      },
      {
        id: 3,
        text: "mov3",
        start: new Date(2017, 1, 1, 15, 0, 0, 0),
        end: new Date(2017, 1, 1, 15, 30, 0, 0)
      }
    ]
  },
  {
    id: 2,
    name: "reg2",
    movements: [
      {
        id: 5,
        text: "mov4",
        start: new Date(2017, 1, 1, 15, 0, 0, 0),
        end: new Date(2017, 1, 1, 15, 45, 0, 0)
      },
      {
        id: 6,
        text: "mov5",
        start: new Date(2017, 1, 1, 18, 0, 0, 0),
        end: new Date(2017, 1, 1, 18, 45, 0, 0)
      },
      {
        id: 7,
        text: "mov6",
        start: new Date(2017, 1, 1, 22, 0, 0, 0),
        end: new Date(2017, 1, 1, 23, 45, 0, 0)
      }
    ]
  }
];

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

svg
  .append("g")
  .selectAll("g")
  .data(data2)
  .enter()

  .append("text")
  .text(function(d, i, j) {
    return d.name;
  })
  .attr("x", function(d, i, j) {
    return  40;
  })
  .attr("y", function(d, i, j) {
    return i* 20 + 40;
  })
  .attr("font-family", "sans-serif")
  .attr("font-size", "20px")
  .append("g") //removing
  .selectAll("text") // these
  .data(function(d, i, j) {
    local.set(this, i);
    return d.movements;
  }) //lines
  .enter() //text displays normally
  .append("text")
  .text(function(d, i, j) {
    return d.start.getHours();
  })
  .attr("x", function(d, i, j) {
    return i * 300 + 40;
  })
  .attr("y", function(d, i, j) {
    return local.get(this) * 20 + 40;
  })
  .attr("font-family", "sans-serif")
  .attr("font-size", "20px");

我不明白的是为什么没有正确显示时间。这就是生成的内容

 <svg width="1500" height="500">
    <g>
        <text x="40" y="40" font-family="sans-serif" font-size="20px">reg1
            <g>
                <text x="40" y="40" font-family="sans-serif" font-size="20px">17</text>
                <text x="340" y="40" font-family="sans-serif" font-size="20px">16</text>
                <text x="640" y="40" font-family="sans-serif" font-size="20px">15</text>
            </g>
        </text>
        <text x="40" y="60" font-family="sans-serif" font-size="20px">reg2
            <g>
                <text x="40" y="60" font-family="sans-serif" font-size="20px">15</text>
                <text x="340" y="60" font-family="sans-serif" font-size="20px">18</text>
                <text x="640" y="60" font-family="sans-serif" font-size="20px">22</text>
            </g>
        </text>
    </g>
</svg>

reg1
十七,
16
15
reg2
15
18
22

---

显然，我希望

出现在

标记之前，但我看不出我做错了什么。有什么想法吗？

问题是您正在将

元素附加到

元素。将元素A附加到元素B会将元素A作为子元素放置在元素B中。这就是为什么文本关闭标记会出现在它的位置

为什么你的代码会这样做

链接时，您需要跟踪每个方法返回的对象，尤其是在一行中多次选择、输入和追加对象时。 下面的代码块使用了您的代码，但我去掉了所有的

.attr

和

.text

方法，因为这些方法只返回它们修改的相同选择。请记住，每一行（第一行除外）都会调用其上一行返回的对象的方法：

svg.append("g")     // returns the new <g> in a selection
  .selectAll("g")   // returns a null selection with the 1st <g> as the parent element
   .data(data2)              
  .enter()          // returns a selection of elements to create in the 1st <g> based on the data  
  .append("text")   // returns a selection of text elements in the 1st <g>
  .append("g")      // returns a selection of <g> elements appended to the <text> elements 
  .selectAll("text")// returns a null selection of <text> elements in those <g> elements in the <text> elements
  .data(function(d, i, j) {  }) 
  .enter()         // returns a selection of elements to create in those <g> elements in the <text> elements in the 1st <g>
  .append("text")  // ....

---

谢谢@andrew。我仍然在听D3的选择，你们的解释真的很有帮助！我对

local

有点困惑。在我最初的问题中，数据函数中设置了

local

，但在您的回答中没有设置，但文本的y值仍在正确计算中……很抱歉，在制作代码段时，我错过了

local

设置y位置的位置。这是因为我对父g元素应用了translate，而设置y位置的函数被破坏了，因为没有定义local（因此不返回数字），y位置默认为零。因为translate应用于父g，所以这不是问题。我已经删除了设置y属性的行。