случайное рассеивание сгруппированных кругов

Question

Я читаю много о d3.js, но каждый раз, когда я пытаюсь сделать что-то новое на примере проектов, он перестает работать. Последний из них основан на примере Джерома Кукье по вложенным данным (http://www.jeromecukier.net/blog/2012/05/28/manipulating-data-like-a-boss-with-d3/).

В этом текущем проекте am, который имеет случайное рассеяние в случайном порядке в прямоугольнике, без использования json-данных для функции перевода. Кроме того, каждый шов работает. Я очень ценю, если кто-нибудь даст мне подсказку !!

здесь как данные JSON и сценарий

mydata.json

[ 

{ "stat": "ok", 
     "id": "VR01", 
     "servername": "Server_1", 
     "cpu": 45, "mem": 25, 
     "diskIO": 0, "bandwith": 200 



}, { "stat": "attention", 
     "id": "VR02", 
     "servername": "Server_02", 
     "cpu": 55, "mem": 35, 
     "diskIO": 1, "bandwith": 2000 


}, { "stat": "warning", 
     "id": "VR03", 
     "servername": "Server_03", 
     "cpu": 98, "mem": 85, 
     "diskIO": 1, 
     "bandwith": 2000 

}, { "stat": "dead", 
     "id": "VR04", 
     "servername": "Server_04", 
     "cpu": 0, "mem": 0, 
     "diskIO": 0, 
     "bandwith": 0 }, { "stat": "ok", 
     "id": "VR05", 
     "servername": "Server_05", 
     "cpu": 45, "mem": 25, 
     "diskIO": 0, "bandwith": 200 

}, { "stat": "attention", 
     "id": "VR06", 
     "servername": "Server_06", 
     "cpu": 55, "mem": 35, 
     "diskIO": 1, "bandwith": 2000 


}, { "stat": "warning", 
     "id": "VR07", 
     "servername": "Server_07", 
     "cpu": 98, "mem": 85, 
     "diskIO": 1, 
     "bandwith": 2000 

}, { "stat": "dead", 
     "id": "VR08", 
     "servername": "Server_08", 
     "cpu": 0, "mem": 0, 
     "diskIO": 0, 
     "bandwith": 0 }  
] 

и

<script> 
    var width = 900, 
      height = 300, 
      margin = 50; 


    var cwidth = 400, cheight = 300, cmargin = 10, maxr = 10; 

    var svg = d3.select(".svg_element").append("svg"); 
    var x = 10; 
    var y = 10; 
    var o = 10; 


    //var status = ["ok", "attention", "warning", "dead"]; 

    var data; 
    d3.json("mydata.json", function(json) { 

     data = d3.nest() 
       .key(function(d) { 
      return d.stat; 

     }) 
       .sortKeys(d3.descending) 
       .entries(json); 


     // One cell for each continent 
     var g = svg.selectAll("g").data(data).enter() 
       .append("g") 
       .attr("transform", function(d, i) { 
      return "translate(" + (400 * i) + ",1)"; 
     }); 
     // we add a rect element with a title element 
     // so that mousing over the cell will tell us which continent it is 
     g 
       .append("rect") 
       .attr("x", cmargin) 
       .attr("y", cmargin) 
       .attr("width", cwidth - 2 * cmargin) 
       .attr("height", cheight - 2 * cmargin) 
       .append("title") 
       .text(function(d) { 
      return d.key; 
     }); 
     // we also write its name below. 
     g 
       .append("text") 
       .attr("y", cheight + 10) 
       .attr("x", cmargin) 
       .text(function(d) { 
      return d.key; 
     }); 

     // now marks, initiated to default values 
     g.selectAll("circle") 
       // we are getting the values of the countries like this: 
       .data(function(d) { 
      return d.values; 
     }) 
       .enter() 
       .append("circle") 
       .attr("cx", cmargin) 
       .attr("cy", cheight - cmargin) 
       .attr("r", 5) 
       // throwing in a title element 
       .append("title") 
       .text(function(d) { 
      return d.servername; 
     }); 

     // finally, we animate our marks in position 
    // here is where am having problem putting the circles in the rectangle with out using the json data 

g.selectAll("circle").transition().duration(100) 
       .attr("r", 10) 
       .attr("cx", function(d) { 
      return x(+d.cpu); 
     }) 
       .attr("cy", function(d) { 
      return y(+d.mem); 
     }) 
       .style("opacity", function(d) { 
      return o(d.diskIO); 
     }) 
       .style("opacity", function(d) { 
      return o(+d.bandwith); 
     }); 


     }); 

    </script> 

Answer 1

Вы должны принять размеры прямоугольников вы порождающих для учета при создании случайных позиций. Кроме того, он должен быть простым:

.attr("cx", function(d) { 
     return cmargin + Math.random() * (cwidth - cmargin); 
    }) 
.attr("cy", function(d) { 
     return cmargin + Math.random() * (cheight - cmargin); 
    }); 

Полный пример here.