score:3

Accepted answer

IE decided to AUTO-CACHE the standard "d3.json()" request. So I switched for an explicit jQuery ajax request with 'cache: false'. In its basic form, the update now works, though the code might still exhibit some of my legastheny towards d3.

I thought I'd use it to visualize the number of users watching a tv channel in our intranet tv site but I think I'll switch to a line chart.. nevertheless, here's the code:

function dynamicBubbles() {

// call redraw every 5 sec
setInterval(function() {
    redraw();
}, 5000);

var width = 960;
var height = 500;

// construct SVG container
var chart = d3.select("#dynD3").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(50, 50)");

// define our pack
var pack = d3.layout.pack()
    .size([width, height - 50])
    .padding(10);

function redraw() {

// get data from MVC controller
return $.ajax({
    type: "GET",
    async: true,
    cache: false,
    url: "/Nice/d3_getCoolBubble",
    data: { },
    success: function (data) {

        // asign new data to existing layout
        var node = chart.selectAll(".node")
            .data(pack.nodes(data), function (d) { return d.name });

        // access brand new data
        node.enter().append("g")
                .classed("node", true)
                .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
            .append("circle")
                .attr("fill", function (d) { return d.children ? "#fff" : "steelblue" })
                .attr("stroke", function (d) { return d.children ? "#fff" : "#ADADAD" })
                .attr("stroke-width", "1")
                .transition()
                .attr("r", function (d) { return d.r });

        node.transition()
            .duration(2000)
            .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });


        node.select("circle")
            .transition()
            .duration(2000)
            .attr("r", function (d) { return d.r; })

        node.append("text")
            .text(function (d) { return d.name; });

    }
});

Related Query