mirror of
https://gitee.com/antv/g6.git
synced 2024-11-30 10:48:24 +08:00
fix: forceAtlas2 event bug
This commit is contained in:
huangtong.ht
parent
57b94985a4
commit
eea36b7ffb
208
demos/test.html
208
demos/test.html
@ -14,76 +14,154 @@
|
||||
<body>
|
||||
<div id="mountNode"></div>
|
||||
<script>
|
||||
$.getJSON('./assets/data/usa-president.json', table => {
|
||||
// table.forEach(sub=>{
|
||||
// sub.age_decade = parseInt(sub.age_decade/10)*10;
|
||||
// });
|
||||
// console.log(JSON.stringify(table, null, ' '));
|
||||
|
||||
// table combine field value view
|
||||
setTimeout(()=>{
|
||||
const combineFieldViewCfg = {
|
||||
combine({ field, value }) {
|
||||
return field + value;
|
||||
}
|
||||
};
|
||||
const testData = {"data":{"pies":[{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[],"name":"支付成功","operation":"bindpaysucc","percentBefore":100.0,"percentUp":2.89809,"total":184}],"name":"支付","operation":"bindpay","percentBefore":76.34855,"percentPie":100.0,"percentUp":2.89809,"total":184}],"name":"绑卡","operation":"bind","percentBefore":71.30178,"percentPie":76.34855,"percentUp":3.79587,"total":241}],"name":"填写银行卡信息","operation":"check","percentBefore":93.11295,"percentPie":71.30178,"percentUp":5.32367,"total":338}],"name":"设置或输入密码","operation":"validate","percentBefore":60.90604,"percentPie":93.11295,"percentUp":5.71744,"total":363}],"name":"填写银行卡号","operation":"cardtype","percentBefore":9.38731,"percentPie":60.90604,"percentUp":9.38731,"total":596}],"name":"绑卡并支付","operation":"update_bindpay","percentPie":9.38731,"percentUp":100.0,"total":6349}],"name":"用户无绑卡","operation":"tradenotbind","percentBefore":29.02113,"percentPie":100.0,"total":1213992},{"children":[{"children":[{"children":[{"children":[],"name":"支付成功","operation":"paypasssucc","percentBefore":75.40887,"percentUp":29.76881,"total":822569},{"children":[{"children":[],"name":"支付成功","operation":"paypasssmssucc","percentBefore":77.10538,"percentUp":4.64847,"total":128446}],"name":"输入验证码","operation":"paypasssms","percentBefore":15.27165,"percentPie":77.10538,"percentUp":6.02872,"total":166585}],"name":"支付密码","operation":"paypass","percentBefore":39.47653,"percentPie":90.68052,"percentUp":39.47653,"total":1090812},{"children":[{"children":[],"name":"支付成功","operation":"ringpaypasssucc","percentBefore":95.01526,"percentUp":0.13521,"total":3736},{"children":[{"children":[],"name":"支付成功","operation":"ringpaypasssmssucc","percentBefore":80.95238,"percentUp":0.00369,"total":102}],"name":"输入验证码","operation":"ringpaypasssms","percentBefore":3.20448,"percentPie":80.95238,"percentUp":0.00456,"total":126}],"name":"手环免密","operation":"ringpaypass","percentBefore":0.1423,"percentPie":98.21974,"percentUp":0.1423,"total":3932},{"children":[{"children":[],"name":"支付成功","operation":"fingerpaypasssucc","percentBefore":87.5014,"percentUp":50.88385,"total":1406018},{"children":[{"children":[],"name":"支付成功","operation":"fingerpaypasssmssucc","percentBefore":76.08684,"percentUp":3.15429,"total":87159}],"name":"输入验证码","operation":"fingerpaypasssms","percentBefore":7.12897,"percentPie":76.08684,"percentUp":4.14564,"total":114552}],"name":"指纹免密","operation":"fingerpaypass","percentBefore":58.15204,"percentPie":94.63037,"percentUp":58.15204,"total":1606852}],"name":"仅支付","operation":"payonly","percentPie":97.77087,"percentUp":100.0,"total":2763191}],"name":"用户有绑卡","operation":"tradebind","percentBefore":70.97887,"percentPie":100.0,"total":2969139}],"name":"创建订单","operation":"trade","percentPie":100.0,"total":4183131}],"successRateMap":{"支付成功率":58.52587,"仅支付成功率":82.44915,"绑卡并支付成功率":0.01516,"绑卡成功率":3.79587}}};
|
||||
var data = {
|
||||
roots: testData.data.pies
|
||||
};
|
||||
function numberWithCommas(x) {
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
G6.registerNode("treeNode", {
|
||||
anchor: [
|
||||
[0, 0.3], // 左中
|
||||
[1, 0.3] // 右中
|
||||
],
|
||||
draw(item) {
|
||||
const group = item.getGraphicGroup();
|
||||
const model = item.getModel();
|
||||
|
||||
// table full view cfg
|
||||
const fullViewCfg = {
|
||||
combine({ field, value,colIndex,rowIndex }) {
|
||||
return field + value + colIndex + rowIndex;
|
||||
var successPercent = model.percentPie || 100;
|
||||
var success = successPercent / 100 * 360;
|
||||
//成功扇形图
|
||||
group.addShape("fan", {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
rs: 30,
|
||||
re: 10,
|
||||
startAngle: Math.PI / 180 * 0 + Math.PI / 180 * 270,
|
||||
endAngle: Math.PI / 180 * success + Math.PI / 180 * 270,
|
||||
// clockwise: false,
|
||||
fill: "#a9ce97"
|
||||
}
|
||||
};
|
||||
|
||||
const sankeyPlugin = new G6.Plugins['template.tableSankey']({
|
||||
table,
|
||||
fields: ['president', 'birth_place', 'age_decade', 'party', 'sgin'],
|
||||
onBeforeRender(graph) {
|
||||
graph.node({
|
||||
color(model) {
|
||||
const colors = ['#FD8C3D', '#D83F43', '#F7BED6', '#E487C7', '#46A848', '#D83F43', '#3B85BA', '#48335B', '#B7CDE9'];
|
||||
return colors[model.rowIndex%10];
|
||||
},
|
||||
style: {
|
||||
stroke: '#616161'
|
||||
}
|
||||
});
|
||||
graph.edge({
|
||||
style: {
|
||||
stroke: 'rgb(0, 0, 0)',
|
||||
strokeOpacity: 0.2
|
||||
}
|
||||
});
|
||||
},
|
||||
...fullViewCfg
|
||||
})
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
height: 600,
|
||||
fitView: 'cc',
|
||||
animate: true,
|
||||
plugins: [sankeyPlugin]
|
||||
});
|
||||
setTimeout(()=>{
|
||||
sankeyPlugin.change(combineFieldViewCfg);
|
||||
}, 2000);
|
||||
setTimeout(()=>{
|
||||
sankeyPlugin.change({
|
||||
fields: ['president', 'birth_place', 'party', 'sgin'],
|
||||
console.log({
|
||||
x: 0,
|
||||
y: 0,
|
||||
rs: 30,
|
||||
re: 10,
|
||||
startAngle: Math.PI / 180 * 0 + Math.PI / 180 * 270,
|
||||
endAngle: Math.PI / 180 * success + Math.PI / 180 * 270,
|
||||
})
|
||||
//失败扇形图
|
||||
const fan = group.addShape("fan", {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
rs: 30,
|
||||
re: 10,
|
||||
startAngle: Math.PI / 180 * success + Math.PI / 180 * 270,
|
||||
endAngle: Math.PI / 180 * 360 + Math.PI / 180 * 270,
|
||||
// clockwise: false,
|
||||
fill: "#f5b296"
|
||||
}
|
||||
});
|
||||
group.addShape("text", {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 45,
|
||||
text: model.name,
|
||||
fontSize: 12,
|
||||
fill: "#ccc",
|
||||
textAlign: "center"
|
||||
}
|
||||
});
|
||||
group.addShape("text", {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 60,
|
||||
text: numberWithCommas(model.total),
|
||||
fontSize: 12,
|
||||
fill: "#333",
|
||||
textAlign: "center"
|
||||
}
|
||||
});
|
||||
group.addShape("text", {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 75,
|
||||
text: model.percentUp ? model.percentUp.toFixed(2) + "%" : "",
|
||||
fontSize: 12,
|
||||
fill: "#333",
|
||||
textAlign: "center"
|
||||
}
|
||||
});
|
||||
if (model.percentBefore) {
|
||||
group.addShape("text", {
|
||||
attrs: {
|
||||
x: -72,
|
||||
y: 8,
|
||||
text: model.percentBefore ? model.percentBefore.toFixed(2) + "%" : "",
|
||||
fontSize: 12,
|
||||
fill: "#333",
|
||||
textAlign: "left"
|
||||
}
|
||||
});
|
||||
}, 4000);
|
||||
setTimeout(()=>{
|
||||
sankeyPlugin.change({
|
||||
fields: ['president', 'birth_place', 'party'],
|
||||
});
|
||||
}, 6000);
|
||||
setTimeout(()=>{
|
||||
sankeyPlugin.change({
|
||||
fields: ['president', 'birth_place', 'party', 'age_decade'],
|
||||
});
|
||||
}, 8000);
|
||||
}, 0);
|
||||
}
|
||||
return fan;
|
||||
}
|
||||
});
|
||||
|
||||
G6.registerEdge("smooth", {
|
||||
getPath(item) {
|
||||
const points = item.getPoints();
|
||||
const start = points[0];
|
||||
const end = points[points.length - 1];
|
||||
const hgap = Math.abs(end.x - start.x);
|
||||
if (end.x > start.x) {
|
||||
return [
|
||||
["M", start.x, start.y],
|
||||
[
|
||||
"C",
|
||||
start.x + hgap / 4,
|
||||
start.y,
|
||||
end.x - hgap / 2,
|
||||
end.y,
|
||||
end.x,
|
||||
end.y
|
||||
]
|
||||
];
|
||||
}
|
||||
return [
|
||||
["M", start.x, start.y],
|
||||
["C", start.x - hgap / 4, start.y, end.x + hgap / 2, end.y, end.x, end.y]
|
||||
];
|
||||
}
|
||||
});
|
||||
const layout = new G6.Layouts.CompactBoxTree({
|
||||
getHGap: function getHGap() {
|
||||
return 60;
|
||||
},
|
||||
getVGap: function getVGap() {
|
||||
return 10;
|
||||
}
|
||||
});
|
||||
const tree = new G6.Tree({
|
||||
container: 'mountNode', // 容器ID
|
||||
height: 820, // 画布高
|
||||
layout,
|
||||
fitView: "autoZoom" // 自动缩放
|
||||
});
|
||||
tree.node({
|
||||
shape: "treeNode"
|
||||
});
|
||||
tree.edge({
|
||||
shape: "smooth"
|
||||
});
|
||||
tree.read(data);
|
||||
tree.on("click", ev => {
|
||||
console.log(ev.item);
|
||||
console.log(ev);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/g6",
|
||||
"version": "2.1.0",
|
||||
"version": "2.1.1-beta",
|
||||
"description": "graph visualization frame work",
|
||||
"main": "build/g6.js",
|
||||
"homepage": "https://github.com/antvis/g6",
|
||||
|
||||
@ -246,6 +246,7 @@ class Layout {
|
||||
model.y = this.nodes[i].y;
|
||||
}
|
||||
graph.updateNodePosition();
|
||||
graph.emit('afterlayout');
|
||||
const fitView = graph.get('fitView');
|
||||
fitView && graph.setFitView(fitView);
|
||||
worker.terminate();
|
||||
@ -263,6 +264,7 @@ class Layout {
|
||||
model.y = this.nodes[i].y;
|
||||
}
|
||||
graph.updateNodePosition();
|
||||
graph.emit('afterlayout');
|
||||
const fitView = graph.get('fitView');
|
||||
fitView && graph.setFitView(fitView);
|
||||
onLayoutComplete();
|
||||
|
||||
@ -1 +1 @@
|
||||
module.exports = '2.1.0';
|
||||
module.exports = '2.1.1-beta';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user