Question

我试图以可重复使用的方式制作和弦图。我的问题是在2个数据集之间转换时，这样的一个数据集包含零值（意味着将删除一个和弦）。所以这里是我调用转换的转换代码：

            changeDataFunction = function(data,selection) { // thisfunction will be called to determine the next drawing function to be called: render() function for the first time of drawing or transition function for the second one.
           if (!chord.matrix()) {
               chord.matrix(data);
               self.render();
           } else {
               var old = {   //save the old value of the diagram for interpolate
                   groups: chord.groups(),
                   chords: chord.chords()
               };
               console.log(old);
               chord.matrix(data);
               transition(old,selection); //call the transition function
           }
        };
function transition(old,selection){
            svg = d3.select(selection).selectAll("svg").data([chord]);
            svg.enter().append("svg")
                .classed("chorddiagram",true);

            arcGroup = svg.select(".arcpath-group").selectAll(".arcpath")
                .data(function(d){ return d.groups(); })
                .enter().append("path")
                .classed("arcpath",true)
                .style("fill",function(d){ return color(d.index);})
                .style("stroke",function(d) { return color (d.index);})
                .attr("d",arc_svg)
                .on("mouseover",fade(0.1))
                .on("mouseout",fade(1));
            arcGroup
                .transition().duration(1500)
                .attrTween("d",arcTween(arc_svg,old));
            arcGroup.exit().remove();

            chordGroup = svg.select(".chordpath-group").selectAll(".chordpath")
                .data(function(d){ return d.chords(); })
                .enter().append("path")
                .classed("chordpath",true)
                .attr("d",chord_svg)
                .style("fill", function(d){ return color(d.target.index);});
            chordGroup
                .transition().duration(1500)
                .style("fill",function(d){
                    return color(d.target.index);
                })
                .attrTween("d", chordTween(chord_svg, old));
            chordGroup.exit().remove();
        }

// Interpolate the arcs
        function arcTween(arc_svg, old) {
            return function(d,i) {
                if (d) {
                    var i = d3.interpolate(old.groups[i], d);
                };
                return function(t) {
                    return arc_svg(i(t));
                }
            }
        }

        // Interpolate the chords
        function chordTween(chord_svg, old) {
            return function(d,i) { //I think the problem from inside this block of code. The chord doesn't exist then the bug occurred. But I'm not good at interpolate so I don't know how to fix this.
                var i = d3.interpolate(old.chords[i], d);
                return function(t) {
                    return chord_svg(i(t));
                }
            }
        }

感谢您的关注和帮助！

Answer 1

所以我通过使用@AmeliaBR的arcTween和chordTween函数来替换我的旧问题，从而解决了我自己的问题： https://stackoverflow.com/a/21923560/3128209 非常感谢你！

当一个和弦为零时，转换和弦图

1 个答案: