实时 D3 气泡图（圆形包装）

Question

我将为您翻译关于IT技术的内容，涉及实时泡泡图和d3.js。该图表本身很简单，因为显示的数据是非嵌套数组，只是不同大小的气泡。通过ajax从MVC控制器获取初始数据创建的初始泡泡图如下所示：

var canvas = d3.select("#dynD3")
    .append("svg")
    .attr("width", 800)
    .attr("height", 500)
    .append("g")
    .attr("transform", "translate(50, 50)");

var pack = d3.layout.pack()
    .size([800, 450])
    .padding(10);

d3.json("/Nice/d3_getCoolBubble", function (data) {

  var nodes = pack.nodes(data);
  console.log(data);

  var node = canvas.selectAll(".node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });

  node.append("circle")
    .attr("class", function (d) { return d.children ? "noupdate" : "update" })
    .attr("id", function (d) { return d.name; })
    .attr("r", function (d) { return d.r })
    .attr("fill", function (d) { return d.children ? "#fff" : "steelblue" })
    .attr("stroke", function (d) { return d.children ? "#fff" : "#000" })
    .attr("stroke-width", "2");

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

在创建初始气泡的基础上，还需要调用

        tick()

函数。这个函数应该负责从MVC控制器获取新数据，然后执行过渡。在过渡完成后，该方法再次调用自身：

    function tick() {

        $.ajax({
            type: "GET",
            async: false,
            url: "/Nice/d3_getCoolBubble",
            data: {},
            success: function (result) {

                console.log(result);

                var update = canvas.selectAll(".update");

                update.transition()
                    .duration(5000)
                    .attr("transform", function (d) {
                        return "translate(" + d.x + "," + d.y + ")";
                    })
                    .each("end", tick);
            }
        });
    };
});

如果有人能提供一个好的链接、示例或提示，告诉我如何执行更新，我会很高兴。我猜这应该是：

• 获取新数据
• 计算新模型
• 添加/删除在新获取的数据中新的/不再存在的节点
• 为所有现有节点启动过渡效果

感谢任何提示！

- peter

---

作为一个建议，attr() 方法可以接受一个键/值对的对象，而不是为每个属性调用它。另外，为什么你设置 async: false？ - Brad M

不需要 async: false，你是对的。你的意思是将链接的 attr() 合并成一个吗？ - peter

是的，我认为这样更简洁：$().attr({ key: value, foo: bar})。 - Brad M

你在最后列出的步骤对我来说听起来不错。 - Lars Kotthoff

嗨，Lars，是的，这些步骤对我来说也很有意义。但是当我只需要阅读时，感觉不必要用拉丁语交谈。 - peter

Answer 1

IE决定自动缓存标准的“d3.json()”请求。因此，我改用显式的jQuery ajax请求，并设置“cache: false”。基本形式上，更新现在可以工作了，但代码可能仍然表现出我对d3的不熟练。

我原本想用它来显示我们企业内部电视网站上观看电视频道的用户数量，但我认为我会改用折线图。尽管如此，以下是代码：

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; });

    }
});

- peter

---

它在英语中被称为阅读障碍，而在德语中则被称为“Legasthenie”（与我所想的相反，这不是一个英语单词）。 - peter