Question

我有一个对象数组，如下所示：

all_data = [
 {  
    title: "Hello", 
    slices: { 
        A: 50, 
        B: 70, 
        C: 40
     }
 },
 {  
    title: "Goodbye", 
    slices: { 
        A: 100, 
        B: 80, 
        C: 50
     }
 },
 {  
    title: "My title", 
    slices: { 
        A: 100, 
        B: 80, 
        C: 50,
        D: 200
     }
 },

//等。 ]

如何创建n个任意数量的矩形组，并按比例缩放以匹配每个切片的数量？我已经尝试了以下方法，但是我不知道如何进一步进行。

d3.select("body")
.append("svg")
.data(all_data)
.enter()
.append("g")
.whatDoIDo()

我不确定如何将数据链中的每个条目充气到任意数量的rect标签。

Answer 1

一种方法是遍历slices对象，并构造一个数组，该数组用作新数据联接的一部分。

例如，假设您在问题中提供的数据集相同，则可以使用以下代码创建嵌套的svg和g结构。第二个数据联接使用已经联接到g.title元素的数据：

    let svg = d3.select("body")
      .append("svg")

    let titles = svg.selectAll(".title")
      .data(all_data)
      .enter()
      .append("g")
        .attr("class", "title")

    let slices = titles.selectAll(".slice")
        .data(function(d) {
          let arr = []
          for (let [key, value] of Object.entries(d.slices)) {
              // create an array using the key and value from the slices object
              arr.push([key, value]);
            }
          return arr
        })
      .enter()
      .append("g")
        .attr("class", "slice")

在数据输入链的每个对象属性中添加任意数量的标签

1 个答案: