Question

我有一些数据用于创建许多图表。我正在使用d3.nest创建一个键，以便按日期组织我的图表。一切似乎都在起作用，除了我不能让pie函数迭代正在创建的2个样本对象。

以下是代码段：

var data1 = [
    {"date":"June2013", "type":"coal", "total":20, "color": "purple", "lat": 100, "long": 100},
    {"date":"June2013", "type":"wind", "total":30, "color": "blue", "lat": 100, "long": 100},
    {"date":"June2013", "type":"nuclear", "total":40, "color": "yellow", "lat": 100, "long": 100},
    {"date":"July2013", "type":"coal", "total":50, "color": "purple", "lat": 500, "long": 200},
    {"date":"July2013", "type":"wind", "total":60, "color": "blue", "lat": 500, "long": 200},
    {"date":"July2013", "type":"nuclear", "total":70, "color": "yellow", "lat": 500, "long": 200}
];

  var energyT = d3.nest()
  .key(function(d) { 
      return d.date; 
  })
  .entries(data1); 

var arc = d3.svg.arc()
        .innerRadius(40)
        .outerRadius(50);

var pie = d3.layout.pie()
        .value(function (d){
            return d.total;
        });
        //console.log("what is the length of energyT: " + energyT.length)
        //printout:  what is the length of energyT: 2
        //it knows there are 2 objects
var arcs = svg.selectAll("arc")
        //.data(pie(energyT[0].values))
        .data(function (d, i){
            //console.log("what is i: " + JSON.stringify(energyT[i].values))
            //printout:  what is i: [{"date":"June2013","type":"coal","total":20,"color":"purple","lat":100,"long":100},...
            //it correctly passes the values of the first object 
            //but it doesn't iterate to the next
            return pie(energyT[i].values);
        })
        .enter()
        .append("svg:g")
        .attr("transform", function(d){
            return "translate(" + d.data.lat+ "," + d.data.long + ")"
        });

      arcs.append("path")
        .attr("d", arc)
        .attr("fill", function (d) {
            console.log("what is d in color " + JSON.stringify(d.data.color))
                return d.data.color;
    });
});

另外，如果我传递一个精确的索引（.data（pie（energyT [0] .values））它将绘制该图表。我不明白如何迭代这两个对象。任何建议将不胜感激。

Answer 1

我能够读到它有两个对象。我还需要在函数中传递energyT：

.data(energyT, function (d, i){
            return pie(energyT[i].values);
        })

因此该部分已解决，现在我无法绘制任何弧，因为路径值无效。这很奇怪，因为我可以在不使用d3.nest创建键值的情况下传递数据，但只要我添加键，即使值看起来正确传递它也不再有效。

我的初步问题已经解决了。

D3，迭代对象以在同一容器内创建多个饼图

1 个答案: