Question

我正在看D3JS中的这个例子：http://bl.ocks.org/mbostock/4063530 我正试图让它变得更有活力＆＃34;点击按钮立即点击。我编写了一个refreshBasicBubbles函数，但结果不起作用 - 因为半径不会按我的意愿更新。

    var diameter = 500,
        format = d3.format(",d"),
        color = d3.scale.category20c();

function buildBasicBubbles() {
    console.log("-> buildBasicBubbles");

    d3.selectAll(".add-data")
            .on("click", function() {
                refreshBasicBubbles();
            });

    var service = d3.layout.pack()
            .sort(null)
            .size([diameter, diameter])
            .padding(1.5);

    var svg = d3.select("#bubbles-basic-view")
            .append("svg")
            .attr("width", diameter)
            .attr("height", diameter);
//            .attr("class", "service");

    var dataSet = randomDataSet();

    var services = service.nodes(dataSet);
    console.log(services);

    var noeuds = svg.selectAll(".noeud")
            .data(services)
            .enter()
            .append("g")
            .attr("class", "noeud")
            .attr("transform", function(d) {
                return "translate(" + d.x + "," + d.y + ")";
            });

    noeuds.append("circle")
            .attr("r", function(d) {
                return d.r;
            })
            .attr("class", "circle")
            .attr("opacity", .75)
            .style("fill", function(d) {
                return color(d.className);
            });
}

function refreshBasicBubbles() {
    console.log("-> refreshBasicBubbles");

    var service = d3.layout.pack()
            .sort(null)
            .size([diameter, diameter])
            .padding(1.5);
    var dataSet = randomDataSet();
    var neoServices = service.nodes(dataSet);

    var svg = d3.select("svg");
    var noeuds = svg.selectAll(".noeud");
    noeuds.data(neoServices)
            .attr("class", "noeud")
            .attr("transform", function(d) {
                return "translate(" + d.x + "," + d.y + ")";
            });
    noeuds.selectAll("circle")
            .attr("r", function(d) {
                return d.r;
            })
            .attr("opacity", .75)
            .style("fill", function(d) {
                return color(d.className);
            });
}

function randomDataSet() {
    var classes = [];

    classes.push({packageName: "A Service", className: "A Service", value: randomSize()});
    classes.push({packageName: "B Service", className: "B Service", value: randomSize()});
    classes.push({packageName: "C Service", className: "C Service", value: randomSize()});
    classes.push({packageName: "D Service", className: "D Service", value: randomSize()});
    classes.push({packageName: "E Service", className: "E Service", value: randomSize()});

    return {children: classes};
}

function randomSize() {
    return 250 * Math.random();
}

提前致谢

Answer 1

通过查看这段代码http://jsfiddle.net/VividD/WDCpq/5/

找到答案

pack.nodes(data);
circles.transition()
       .duration(2000)
       .attr("cx", function(d) { return d.x; })
       .attr("cy", function(d) { return d.y; })

这个想法是＆＃34;简单地＆＃34; （重新）打包数据（以便重新计算x，y，r）。然后将过渡应用于圈子

D3JS包布局动态更新

1 个答案: