小编Fjo*_*ten的帖子

我正在弄乱转换,当转换应用于不同功能的选择时,我注意到一些口吃和闪烁.但是,如果使用方法链接应用转换,则它完全按照规定工作.

下面是简单移动一些文字的小例子(小提琴).在转换开始之前,第一个最左边的字符串神奇地传送到页面下方.第二个,最右边的字符串具有从页面的顶部到底部的平滑过渡.

为什么这个'瞬移'会发生？显然,在单独的函数中应用转换与链接它不同,但有没有办法实现这一点？说,我想将相同的过渡应用于许多不同的对象 - 从不同的选择中检索 - 那么有没有办法将过渡转移到自己的功能而不会出现这种口吃？

var svg = d3.select('svg');
var textElem = svg.append('text')
    .data(['hello world'])
    .attr('x', 30)
    .attr('y', 100)
    .attr('fill', '#000')
    .attr('id', 'a')
    .text(function (d) {
        return d;
    });
var textElem2 = svg.append('text')
    .data(['some text'])
    .attr('x', 230)
    .attr('y', 100)
    .attr('fill', '#000')
    .attr('id', 'a')
    .text(function (d) {
        return d;
    });
setTimeout(foo, 3000);

function foo() {
    textElem.data(['hello world, again!']);
    applyTextTransitions(textElem);
    textElem.attr({
        x: 30,
        y: 150
    });
    textElem.text(function (d) {
        return d;
    });

    textElem2.data(['some more text!'])
        .transition()
        .duration(1000)
        .style('opacity', …

我正在使用JointJS图,使用DirectedGraph来处理布局,我正在尝试实现类似于下图的内容.我需要将节点(A,B,C,D,E,F,G,H,I,J)"概括"或包含在单独的节点(Foo,Bar,Hmm)中.当我将所有元素添加到图表中时,一切都在彼此之上.但是,如果我不在区域之间添加顶点,则所有元素都会正确布局,但没有连接区域的顶点.

根据下面的代码,我做错了什么？节点(A,B,C,D,E,F,G,H,I,J)是否会导致错误,因为它们没有连接到图表的其余部分？

您提供的任何反馈都非常感谢.

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: $('#paper');
    width: 2000,
    height: 2000,
    gridSize: 1,
    model: graph
});

var regions = [ makeRegion('Foo'), makeRegion('Bar'), makeRegion('Hmm')];
var nodes = [
    makeNode('A'),
    makeNode('B'),
    makeNode('C'),
    makeNode('D'),
    makeNode('F'),
    makeNode('G'),
    makeNode('H'),
    makeNode('I'),
    makeNode('J'),
];
regions[0].embed(nodes[0]).embed(nodes[1]).embed(nodes[2]);
regions[1].embed(nodes[3]).embed(nodes[4]).embed(nodes[5]);
regions[2].embed(nodes[6]).embed(nodes[7]).embed(nodes[8]);
var vertices = [
    connect(regions[0], regions[1]),
    connect(regions[1], regions[2]),
    connect(regions[2], regions[0])
    ];
paper.addCells(regions.concat(nodes).concat(vertices));
joint.layout.DirectedGraph.layout(paper, {
    rankDir: 'LR',
    marginX: 30,
    marginY: 30,
    clusterPadding: {
        top: 30,
        left: 10,
        right: 10,
        bottom: 10
    }
}); …