json数据的Javascript数据结构

Question

嗨，我有一些詹金斯的JSON数据。我取JSON，并得到看起来像这样的作业的对象：

{ 
    color: "#FF4136" 
    name: "XXX-tomcat-accept" 
    url: "http://1.1.7.9:8080/job/xxx-tomcat-verify/" 
} 

对于每个工作流有三项工作

• -verify
• -accept
• - 交货

我想要做的是构建一个数组结构，它是一个数组或数组的散列，其中第一个元素是验证然后接受然后交付（与上面的列表相同的顺序）。

因此，像这样

0[xxx-tomcat-verify,xxx-tomcat-accept,xxx-tomcat-delivery] 
1[xxx-linux-verify,xxx-linux-accept,xxx-linux-delivery] 
2 
3 
...... 

我只是不能换我的头周围的逻辑重新组合在上述结构的数据。我想要做的是使用d3为Jenkins构建一个轻量级构建仪表板。下面的代码构建作业并标记它们。只需要按照正确的顺序进行操作。

的代码，我这样是

d3.json("data.json", function(error, data) { 

    job.forEach(function(d){ 

     //green balls ! 
     if (d.color === "blue") { 
      d.color = "#2ECC40"; 
     } else if(d.color === "notbuilt"){ 
      d.color = "#AAAAAA"; 

     } else if(d.color === "aborted"){ 
      d.color = "#0074D9"; 
     } else if(d.color === "red"){ 
      d.color = "#FF4136" 

     } 


     var svgContainer = d3.select("body").append("svg") 
          .attr("width", 460) 
          .attr("height", 110); 

     var rectangle = svgContainer.append("rect") 
          .attr("x", 5) 
          .attr("y", 5) 
          .attr("width", 450) 
          .attr("height", 100) 
          .attr("text", d.name) 
          .attr("rx", 10) 
          .attr("ry", 10) 
          .attr("xlink:href", d.url) 
          .attr("fill", d.color); 

     var text = svgContainer.selectAll("text") 
         .data(rectangle) 
         .enter() 
         .append("text"); 

     var textLabels = text 
       .attr("x", 20) 
       .attr("y", 60) 
       .text(d.name) 
       .attr("font-family", "Avro") 
       .attr("font-size", "30px") 
       .attr("fill", "#2f2f2f"); 



     }); 

}); 

Answer 1

您可以使用d3.nest（）。

https://jsfiddle.net/ermineia/jz293y70/1/

var jobs = [{ 
    color: "#FF4136", 
    name: "XXX-tomcat-verify", 
    url: "http://1.1.7.9:8080/job/xxx-tomcat-verify/" 
}, 
{ 
    color: "#FF4136", 
    name: "XXX-tomcat-accept", 
    url: "http://1.1.7.9:8080/job/xxx-tomcat-accept/" 
}, 
{ 
    color: "#FF4136", 
    name: "XXX-tomcat-delivery", 
    url: "http://1.1.7.9:8080/job/xxx-tomcat-delivery/" 
}, 
{ 
    color: "#FF4136", 
    name: "XXX-linux-verify", 
    url: "http://1.1.7.9:8080/job/xxx-tomcat-verify/" 
}, 
{ 
    color: "#FF4136", 
    name: "XXX-linux-accept", 
    url: "http://1.1.7.9:8080/job/xxx-tomcat-accept/" 
}, 
{ 
    color: "#FF4136", 
    name: "XXX-linux-delivery", 
    url: "http://1.1.7.9:8080/job/xxx-tomcat-delivery/" 
}]; 

console.log(jobs); 
var formatted_map = d3.nest().key(function(d) { return d.name.substr(0, d.name.lastIndexOf('-')); }).map(jobs); 
console.log(formatted_map); 
console.log(JSON.stringify(formatted_map)) 
var formatted_array = d3.nest().key(function(d) { return d.name.substr(0, d.name.lastIndexOf('-')); }).entries(jobs); 
console.log(formatted_array); 
console.log(JSON.stringify(formatted_array)) 

写出：

[Object, Object, Object, Object, Object, Object] 
(index):78 Object {XXX-tomcat: Array[3], XXX-linux: Array[3]} 
(index):79 {"XXX-tomcat":[{"color":"#FF4136","name":"XXX-tomcat-verify","url":"http://1.1.7.9:8080/job/xxx-tomcat-verify/"},{"color":"#FF4136","name":"XXX-tomcat-accept","url":"http://1.1.7.9:8080/job/xxx-tomcat-accept/"},{"color":"#FF4136","name":"XXX-tomcat-delivery","url":"http://1.1.7.9:8080/job/xxx-tomcat-delivery/"}],"XXX-linux":[{"color":"#FF4136","name":"XXX-linux-verify","url":"http://1.1.7.9:8080/job/xxx-tomcat-verify/"},{"color":"#FF4136","name":"XXX-linux-accept","url":"http://1.1.7.9:8080/job/xxx-tomcat-accept/"},{"color":"#FF4136","name":"XXX-linux-delivery","url":"http://1.1.7.9:8080/job/xxx-tomcat-delivery/"}]} 
(index):81 [Object, Object] 
(index):82 [{"key":"XXX-tomcat","values":[{"color":"#FF4136","name":"XXX-tomcat-verify","url":"http://1.1.7.9:8080/job/xxx-tomcat-verify/"},{"color":"#FF4136","name":"XXX-tomcat-accept","url":"http://1.1.7.9:8080/job/xxx-tomcat-accept/"},{"color":"#FF4136","name":"XXX-tomcat-delivery","url":"http://1.1.7.9:8080/job/xxx-tomcat-delivery/"}]},{"key":"XXX-linux","values":[{"color":"#FF4136","name":"XXX-linux-verify","url":"http://1.1.7.9:8080/job/xxx-tomcat-verify/"},{"color":"#FF4136","name":"XXX-linux-accept","url":"http://1.1.7.9:8080/job/xxx-tomcat-accept/"},{"color":"#FF4136","name":"XXX-linux-delivery","url":"http://1.1.7.9:8080/job/xxx-tomcat-delivery/"}]}]