javascript - 我可以使用字典作为矩形的 'data' 对象吗？

Question

我想制作四个具有固定宽度和高度的矩形。

var rects = {
  key1:  { x: base_x, y: base_y, fullname: "Seed", cnt: 3500, row: 1 },
  key2:  { x: 2*base_x, y: base_y, fullname: "Series A", cnt: 4700, row: 1 },
  key3:  { x: 3*base_x, y: base_y, fullname: "Series B", cnt: 2300, row: 1},
  key4:  { x: 4*base_x, y: base_y, fullname: "Series C", cnt: 1750, row: 1}}

我知道我可以将它们变成矩形，如果我用 [] 替换 {} 将它变成一个数组，如果我摆脱数组以来的键不能有 key ，然后我可以使用它。

var rectangles = svg.selectAll(".rect")
    .data(rects)
    .enter()
    .append("rect")

稍后我想在需要键的函数中使用 rects 对象。

我想我可以用类似这样的东西制作一个基于矩形的数组

var rects_array = []
for (i = 0; i < d3.keys(rects).length; i++){
    rects_array.push(rects[d3.keys(rects)[i]])
}

我只是好奇我是否可以直接传递 rects 而不是从中创建数组。

Answer 1

简短回答:不，你不能。

D3 data() 方法只接受 3 个东西:

• 一个数组；
• 一个函数；
• 没有。

因此，您不能在此处使用对象。

关于您的最后一个片段，基于 rects 对象创建数组的最简单方法是使用 Object.values :

var rects = {
  key1: {
    x: "foo",
    y: "bar",
    fullname: "Seed",
    cnt: 3500,
    row: 1
  },
  key2: {
    x: "foo",
    y: "bar",
    fullname: "Series A",
    cnt: 4700,
    row: 1
  },
  key3: {
    x: "foo",
    y: "bar",
    fullname: "Series B",
    cnt: 2300,
    row: 1
  },
  key4: {
    x: "foo",
    y: "bar",
    fullname: "Series C",
    cnt: 1750,
    row: 1
  }
};

console.log(Object.values(rects))

或者，如果您想要 D3 方法，可以使用 d3.values ，它在内部使用了一个 for...in 循环:

var rects = {
  key1: {
    x: "foo",
    y: "bar",
    fullname: "Seed",
    cnt: 3500,
    row: 1
  },
  key2: {
    x: "foo",
    y: "bar",
    fullname: "Series A",
    cnt: 4700,
    row: 1
  },
  key3: {
    x: "foo",
    y: "bar",
    fullname: "Series B",
    cnt: 2300,
    row: 1
  },
  key4: {
    x: "foo",
    y: "bar",
    fullname: "Series C",
    cnt: 1750,
    row: 1
  }
};

console.log(d3.values(rects))

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

然后将该数组传递给 selection.data()，并根据您的需要在其他地方使用您的 rects 对象。