Question

我希望能够将D3 General Update Pattern III实现为D3包布局。这意味着每个字符都在一个圆圈内，并且字符圆圈将位于一个更大的封闭圆圈内。一切都应该与GUPIII保持一致，除了当然，字符的位置将是一个更大的圆而不是横轴。

我试图遵循相同的GUPIII结构，包括使用密钥数据连接的重要方面。

var alphaBubble = d3.layout.pack()
    .size([diameter, diameter])
    .padding(5);

var nodes = alphaBubble.nodes(data);

var vis = svg.selectAll("circle")
    .data(nodes, function(d) { return d; });

但是使用密钥进行数据连接似乎不适用于包布局。

我无法理解可能的替代机制，例如pack.value或nest。我无法理解他们是否会以某种方式完成GUPIII中正在进行的操作，其中传入（输入）字符为绿色，现有（更新）字符为黑色，退出字符被删除。

按键加入对于保持char的相对位置很重要。我意识到相对位置的这个方面在包装布局中并不像在线性轴布局中那么容易看到，但是我有必要这样在本例中不明显。我只需要成功实现一个“按键”连接，并在新数据进入时保留现有节点。

我通常看到的包布局是在数据更新中没有节点被替换（可能只有大小等属性被更改），或者所有节点都被新的传入数据替换，具体取决于上下文。但我希望保留相同的节点（通过某些键，在本例中为char本身），删除不再存在的节点，并“按键”添加新节点。任何人都可以帮我翻译D3 General Update Pattern II到包布局吗？我将包括我的完整代码尝试，但我真的认为只要你熟悉包布局如何在更新时按键加入就能更清楚地看GUPIII。

谢谢。

Answer 1

好的，通过大量试验和错误以及对现有示例的研究，我已经能够解决关于如何将D3 General Update Pattern III作为包布局实现的问题。我无法找到任何按键使用数据连接的示例，这对于更新时的对象持久性是必要的，所以我希望我的示例可以为需要相同行为模式的其他人提供一些指导。

我的解决方案是here。我的Javascript代码是here。

我将指出一些重要的亮点。首先，与线性非包装版本不同，数据按键连接值必须作为对象属性（即d.id）而不是直接（即d）进行访问。

// Data join by key to <g> nodes
var node = svg.selectAll(".node")
    .data(nodes, function(d) {
        return d.id; 
    });

// Data join by key to circles
var circles = svg.selectAll("circle")
    .data(nodes, function(d) {
        return d.id; 
    });

接下来，由于字母字符以圆圈表示，因此圆圈和字符必须包含在<g>元素（即节点）中。这是最棘手的部分：数据需要通过键分别连接到节点和圆元素。这是因为包布局已经进行了必要的比例计算（即圆半径）和坐标位置。因此，圆圈需要数据的计算半径，<g>节点元素需要计算出的坐标位置。因此，每个都需要单独的数据连接。

一旦我弄清楚这一点，所有必要的操作和引用就到位了，并且通用更新模式的包版本开始正常工作。务必将线性和包装版本相互比较。

我认为，字母化排序是不必要的，因为包布局不适合订购。但我保留了整理的一致性，因为我想观察其效果。

D3js如何打包布局使用数据连接按键进行更新？

1 个答案: