Fatal编程技术网
  • javascript/
  • Javascript 将过渡添加到可缩放的圆形填充

Javascript 将过渡添加到可缩放的圆形填充

javascript d3.js

Javascript 将过渡添加到可缩放的圆形填充,javascript,d3.js,Javascript,D3.js,我在flare4.csv中有这些数据： SplitMth,id,value Dec,FRUIT, Dec,FRUIT~Apples, Dec,FRUIT~Apples~X,100 Dec,FRUIT~Pears, Dec,FRUIT~Pears~Y,200 Dec,FRUIT~Lemon, Dec,FRUIT~Lemon~Z,300 Jan,FRUIT, Jan,FRUIT~Apples, Jan,FRUIT~Apples~X,300 Jan,FRUIT~Pears, Jan,FRUIT~Pea

我在
flare4.csv
中有这些数据：

SplitMth,id,value
Dec,FRUIT,
Dec,FRUIT~Apples,
Dec,FRUIT~Apples~X,100
Dec,FRUIT~Pears,
Dec,FRUIT~Pears~Y,200
Dec,FRUIT~Lemon,
Dec,FRUIT~Lemon~Z,300
Jan,FRUIT,
Jan,FRUIT~Apples,
Jan,FRUIT~Apples~X,300
Jan,FRUIT~Pears,
Jan,FRUIT~Pears~Y,200
Jan,FRUIT~Lemon,
Jan,FRUIT~Lemon~Z,100
然后我有以下圆形包装可视化，这是对
bl.ock
的改编：


可缩放圆形填料
.节点{
光标：指针；
}
.节点：悬停{
行程：#000；
笔划宽度：1.5px；
}
.node—叶{
填充物：白色；
}
.标签{
字体：9px“Helvetica Neue”，Helvetica，Arial，无衬线；
文本锚定：中间；
文本阴影：01px0#fff，1px0#fff，-1px0#fff，0-1px0#fff；
}
.标签，
.node—根，
.node—叶{
指针事件：无；
}
.点击但是{
字体系列：verdana；
字体大小：11px；
/*字体大小：粗体*/
背景色：#ffa500！重要；
边界半径：100px；
形状渲染：边缘清晰；
}
#可缩放{
位置：绝对位置；
顶部：35px；
左：25px；
宽度：250px；
高度：250px；
}
var zoomabledata=“flare4.csv”；
函数resetAll（）{
console.log（“重置所有已按下”）/>>
var format=d3.format（“，d”）；
//>>>>>>>>>>>
var color=d3.scaleLinear（）
.domain（[-1,5]）
.范围（[“hsl（152,80%，80%），“hsl（228,30%，40%）”）
.插值（d3.插值EHCL）；
//新增>>>>>>>
var stratify=d3.stratify（）
.parentId（函数（d）{
返回d.id.substring（0，d.id.lastIndexOf（“~”）；
});
//>>>>>>>>>>>
var pack=d3.pack（）
.尺寸（[直径-边距，直径-边距]）
.填充（2）；
函数转换圆（mth）{
控制台日志（mth）；
d3.csv（缩放数据，函数（错误，数据）{
如果（错误）抛出错误；
dta=data.filter（函数（行）{
如果（行['SplitMth']==mth）{
返回true；
}
}).地图（功能（d）{
返回{
“id”：d.id，
“价值”：+d.价值，
};
})
//新增>>>>>>>
根=分层（dta）
.sum（函数（d）{
返回d值；
})
.排序（功能（a、b）{
返回b.value-a.value；
});
//>>>>>>>>>>>
var focus=root，
nodes=pack（root）.subjections（），
看法
变量循环=g.selectAll（“循环”）
.数据（节点）
.enter（）.append（“圆”）
.attr（“类”，函数（d）{
返回d.parent？d.children？“node”：“node-node--leaf”：“node-node--root”；
})
.样式（“填充”，功能（d）{
返回d.children？颜色（d.depth）：空；
})
.打开（“单击”，功能（d）{
如果（focus！==d）缩放（d），则d3.event.stopPropagation（）；
});
var text=g.selectAll（“文本”）
.数据（节点）
.enter（）.append（“文本”）
.attr（“类别”、“标签”）
.样式（“填充不透明度”，函数（d）{
返回d.parent==root？1:0；
})
.样式（“显示”，功能（d）{
返回d.parent==根？“内联”：“无”；
})
.文本（功能（d）{
返回d.id.substring（d.id.lastIndexOf（“~”）+1）.split（/（？=[A-Z][^A-Z]）/g）；
})
var node=g.selectAll（“圆圈，文本”）；
node.append（“标题”）
.文本（功能（d）{
返回d.id+“\n”+格式（d.value）；
});
svg
.on（“单击”，函数（）{
缩放（根）；
});
zoomTo（[root.x，root.y，root.r*2+margin]）；
功能缩放（d）{
var focus0=焦点；
焦点=d；
var transition=d3.transition（）
.持续时间（d3.event.altKey？7500:750）
.tween（“缩放”，功能（d）{
var i=d3.interpolateZoom（视图，[focus.x，focus.y，focus.r*2+边距]；
返回函数（t）{
zoomTo（i（t））；
};
});
转换。选择全部（“文本”）
.过滤器（功能（d）{
返回d.parent===focus | | this.style.display===“inline”；
})
.样式（“填充不透明度”，函数（d）{
返回d.parent==focus？1:0；
})
.开启（“启动”，功能（d）{
如果（d.parent==focus）this.style.display=“inline”；
})
.开启（“结束”，功能（d）{
如果（d.parent！==focus）this.style.display=“无”；
});
}
函数zoomTo（v）{
var k=直径/v[2]；
视图=v；
node.attr（“转换”，函数（d）{
返回“translate”（+（d.x-v[0]）*k+”，“+（d.y-v[1]）*k+”；
});
圆属性（“r”，函数（d）{
返回d.r*k；
});
}
})
};
变革圈（“一月”）；
最初渲染时，它与预期一致，并将以可预测的方式进行缩放。
现场预览：

我想做两件事，但我想第二件事需要另外一个问题

如何修改代码，以便当我从输入下拉列表中选择“Dec”时，可视化效果会相应地改变，并在单击缩放时表现出预期的效果

（我想将上述更改设置为5秒的过渡l 
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>ZOOMABLE CIRCLE PACKING</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
    .node {
        cursor: pointer;
    }

    .node:hover {
        stroke: #000;
        stroke-width: 1.5px;
    }

    .node--leaf {
        fill: white;
    }

    .label {
        font: 9px "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-anchor: middle;
        text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
    }

    .label,
    .node--root,
    .node--leaf {
        pointer-events: none;
    }

    .clickBut {
        font-family: verdana;
        font-size: 11px;
        /*font-weight: bold;*/
        background-color: #ffa500 !important;
        border-radius: 100px;
        shape-rendering: crispEdges;
    }

    #zoomable {
        position: absolute;
        top: 35px;
        left: 25px;
        width: 250px;
        height: 250px;
    }
    </style>
</head>

<body>
    <div id="zoomable"></div>
    <input id="clickMe" type="button" value="Refresh|Reset" onclick="resetAll();" class="clickBut" />
    <select id="mth-menu"></select>
    <script type="text/javascript">
    var zoomableDataX = "flare4.csv";

    function resetAll() {
        console.log("resetAll pressed") //<< placeholder
    }

    populateMonthCombo();

    function populateMonthCombo() {
        removeOptions(document.getElementById("mth-menu"));

        d3.csv(zoomableDataX, function(rows) {

            //data for the combobox control
            dtaMths = rows.filter(function(row) {
                if ((1 === 1)) { //<< placeholder
                    return true;
                }
            }).map(function(d) {
                return {
                    "SplitMth": d.SplitMth
                };
            })

            var menu = d3.select("#mth-menu");

            menu.selectAll("option")
                .data(d3.map(dtaMths, function(d) {
                    return d.SplitMth;
                }).keys())
                .enter()
                .append("option")
                .property("selected", function(d) {
                    return d === "Jan";
                })
                .text(function(d) {
                    return d;
                });

            menu
                .on("change", function() {
                    changeCircles(this.value)
                });

        });
    };

    function removeOptions(selectbox) {
        var i;
        for (i = selectbox.options.length - 1; i >= 0; i--) {
            selectbox.remove(i);
        }
    };


    var zoomDiv = d3.select("#zoomable")

    var svg = zoomDiv.append("svg").attr("width", "250").attr("height", "250"),
        margin = 20,
        diameter = +svg.attr("width"),
        g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");


    //added>>>>>>
    var format = d3.format(",d");
    //>>>>>>>>>>>

    var color = d3.scaleLinear()
        .domain([-1, 5])
        .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
        .interpolate(d3.interpolateHcl);

    //added>>>>>>
    var stratify = d3.stratify()
        .parentId(function(d) {
            return d.id.substring(0, d.id.lastIndexOf("~"));
        });
    //>>>>>>>>>>>

    var pack = d3.pack()
        .size([diameter - margin, diameter - margin])
        .padding(2);


    function changeCircles(mth) {
        console.log(mth);
        d3.csv(zoomableDataX, function(error, data) {
            if (error) throw error;

            dta = data.filter(function(row) {
                if (row['SplitMth'] === mth) {
                    return true;
                }
            }).map(function(d) {
                return {
                    "id": d.id,
                    "value": +d.value,
                };
            })

            //added>>>>>>
            root = stratify(dta)
                .sum(function(d) {
                    return d.value;
                })
                .sort(function(a, b) {
                    return b.value - a.value;
                });
            //>>>>>>>>>>>


            var focus = root,
                nodes = pack(root).descendants(),
                view;

            var circle = g.selectAll("circle")
                .data(nodes)
                .enter().append("circle")
                .attr("class", function(d) {
                    return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root";
                })
                .style("fill", function(d) {
                    return d.children ? color(d.depth) : null;
                })
                .on("click", function(d) {
                    if (focus !== d) zoom(d), d3.event.stopPropagation();
                });


            var text = g.selectAll("text")
                .data(nodes)
                .enter().append("text")
                .attr("class", "label")
                .style("fill-opacity", function(d) {
                    return d.parent === root ? 1 : 0;
                })
                .style("display", function(d) {
                    return d.parent === root ? "inline" : "none";
                })
                .text(function(d) {
                    return d.id.substring(d.id.lastIndexOf("~") + 1).split(/(?=[A-Z][^A-Z])/g);
                })

            var node = g.selectAll("circle,text");

            node.append("title")
                .text(function(d) {
                    return d.id + "\n" + format(d.value);
                });

            svg
                .on("click", function() {
                    zoom(root);
                });

            zoomTo([root.x, root.y, root.r * 2 + margin]);

            function zoom(d) {
                var focus0 = focus;
                focus = d;

                var transition = d3.transition()
                    .duration(d3.event.altKey ? 7500 : 750)
                    .tween("zoom", function(d) {
                        var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
                        return function(t) {
                            zoomTo(i(t));
                        };
                    });

                transition.selectAll("text")
                    .filter(function(d) {
                        return d.parent === focus || this.style.display === "inline";
                    })
                    .style("fill-opacity", function(d) {
                        return d.parent === focus ? 1 : 0;
                    })
                    .on("start", function(d) {
                        if (d.parent === focus) this.style.display = "inline";
                    })
                    .on("end", function(d) {
                        if (d.parent !== focus) this.style.display = "none";
                    });

            }

            function zoomTo(v) {
                var k = diameter / v[2];
                view = v;
                node.attr("transform", function(d) {
                    return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")";
                });
                circle.attr("r", function(d) {
                    return d.r * k;
                });
            }

        })
    };

    changeCircles("Jan");
    </script>
</body>

function changeCircles(mth) {

  // Why download the file each time?

  dta = data.filter(function(row) {
    if (row['SplitMth'] === mth) {
      return true;
    }
  }).map(function(d) {
    return {
      "id": d.id,
      "value": +d.value,
    };
  })

  //added>>>>>>
  root = stratify(dta)
    .sum(function(d) {
      return d.value;
    })
    .sort(function(a, b) {
      return b.value - a.value;
    });
  //>>>>>>>>>>>


  var focus = root,
    nodes = pack(root).descendants(),
    view;

  var circle = g.selectAll("circle")
    .data(nodes, function(d){
      return d.id; //<-- add a key function to uniquely identify a node
    });

  circle.exit().remove(); //<-- those nodes leaving

  circle = circle.enter() //<-- those nodes entering
    .append("circle")
    .attr("class", function(d) {
      return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root";
    })
    .style("fill", function(d) {
      return d.children ? color(d.depth) : null;
    })
    .on("click", function(d) {
      if (focus !== d) zoom(d), d3.event.stopPropagation();
    })
    .merge(circle); //<-- those entering and updating

 ...