3

我有一个非常类似于圆形包装的图表

在某些时候，用户想要查看一些不同的数据。显然，可以立即显示不同的图表，但是从感知和认知的角度来看，过渡会更好。注意：层次结构保持不变，没有新的或删除的节点，只有确定圆大小变化的基础值。

在结构相同但值不同的两个圆包图之间实现这种平滑过渡的好方法是什么？

（当然，在过渡期间，可以说持续 10 秒，不需要像原始图中那样保持圆之间的关系，圆可以相交并相互传递）

我知道treemaps有类似的解决方案。但是，它根本不能应用于圆形包装。树形图甚至有一个特殊的函数sticky() 可以在这种情况下提供帮助。

编辑：我正在附加新版本的jsfiddle。

一些功能现在开始工作。由随机数据驱动的转换很漂亮。

我现在有两个担忧：

  1. 我不知道如何更新工具提示。这很重要，用户应该能够通过工具提示识别数据点。另一方面，好处是它们不需要在过渡期间进行插值，突变就足够了，但我不知道该怎么做。
  2. 我真的不明白代码。编码主要是试错过程。如果有人验证代码是好的，或者可能不好，或者它可能不同，我将不胜感激。

编辑 2：我解决了问题，如果有人需要代码，请在答案中附加 jsfiddle。仍然欢迎大家对解决方案发表评论。

在此处输入图像描述

代码中最关键的部分似乎是：

function updateVis() {
    // change pack value
    if (updateMethod == 0)
        pack.value(function(d) { return d.size; });
    if (updateMethod == 1)
        pack.value(function(d) { return 100; });
    if (updateMethod == 2)
        pack.value(function(d) { return 1 + Math.floor(Math.random()*101); });

    var data1 = pack.nodes(data);

//    titles = ?????

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

提前感谢您的任何帮助或提示。

4

1 回答 1

1

看来我终于解决了所有问题。jsfiddle 在这里。

这是处理平滑圆形包布局转换的整个代码（数据定义和按钮创建除外）：

var diameter = 500,
    format = d3.format(",d"),
    dataSource = 2;
var pack = d3.layout.pack()
    .size([diameter - 4, diameter - 4])
    .value(function(d) { return d.size; });
var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter);

var data = getData();

var vis = svg.datum(data).selectAll(".node")
    .data(pack.nodes)
   .enter()
    .append("g");

var titles = vis.append("title")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .text(function(d) { return d.name +
        (d.children ? "" : ": " + format(d.value)); });

var circles = vis.append("circle")
    .attr("stroke", "black")
    .style("fill", function(d) { return !d.children ? "tan" : "beige"; })
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", function(d) { return d.r; });

updateVis();

function updateVis() {

    if (dataSource == 0)
        pack.value(function(d) { return d.size; });
    if (dataSource == 1)
        pack.value(function(d) { return 100; });
    if (dataSource == 2)
        pack.value(function(d) { return 1 +
                 Math.floor(Math.random()*301); });

    var data1 = pack.nodes(data);

    titles.attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; })
        .text(function(d) { return d.name +
            (d.children ? "" : ": " + format(d.value)); });

    circles.transition()
        .duration(5000)
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .attr("r", function(d) { return d.r; });
};
于 2013-12-29T08:54:19.870 回答