Question

我正在阅读很多关于d3.js的内容，但每次当我尝试根据示例项目做一些新事情时，它都会停止工作。最新版本基于Jerome Cukier关于嵌套数据的示例（http://www.jeromecukier.net/blog/2012/05/28/manipulating-data-like-a-boss-with-d3/）。

在这个当前项目中，我很难在矩形中随机散布圆圈，而不使用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。

随机散布分组的圆圈

1 个答案: