Escenas
La realización de la selección de fotogramas en la versión d3.jsV7 en este artículo se refiere a la realización de la función de selección de fotogramas y, finalmente, a las coordenadas de posición del rectángulo de selección de fotogramas.
Recientemente, existe una demanda de visualización de datos a gran escala, lo que requiere la visualización de decenas de miles de nodos y decenas de miles de bordes. El producto usa g6, que parece estar atascado. El líder recomendó un cosmógrafo de complemento. Una de las demostraciones de complemento y la dirección de github son las siguientes.
Dirección de demostración del complemento Dirección
de github
Volviendo al tema, este complemento puede admitir cientos de miles de piezas de datos, y solo se pueden mostrar. Necesitamos un análisis de los nodos en el gráfico, por lo que proponemos agregar una función de selección de marco para enmarcar algunos nodos y después de eso, volver a la página que hemos desarrollado usando g6 para analizar (esta página ya tiene algunas funciones de análisis).
Así que busqué en línea e investigué la selección de fotogramas en la demostración de Cosmograph. Resultó que la función de selección de fotogramas se realizó utilizando el pincel de d3.
resolver
Paso 1: Instale d3.js (la última versión de V7+ que instalé)
npm install d3 --save
Paso 2: Introducir d3
import * as d3 from 'd3'
Paso 3: código específico
html
<canvas id="canvas" />//这是cosmograph的图
<i class="iconfont icon-kuangxuan" @click="brushSelect" /> //框选按钮
<svg id="brushContainer" width="100%" height="100%"></svg> //框选
scs
canvas {
width: 100%;
height: 100%;
}
#brushContainer {
position: absolute;
left: 0;
top: 0;
display: none;
}
js
data() {
return {
canvas: null,
brushDom: null
}
},
mounted() {
this.graph = Graph // 这是cosmograph的图实例
this.canvas = document.querySelector('canvas')
},
methods: {
// 框选
brushSelect() {
const _this = this
document.getElementById('brushContainer').style.display = 'block'
_this.brushDom = d3.select('#brushContainer').append('g').attr('id', 'brush')
_this.brushDom.call(
d3.brush()
.on('end', function() {
const selection = d3.brushSelection(this)
_this.selectPointsInArea(selection)//selection是框选矩形的位置坐标，该行是使图中框选节点高亮，使用的是cosmograph的自带的方法
_this.cancelBrush()
})
.extent([
[0, 0],
[this.canvas.scrollWidth, this.canvas.scrollHeight]
])
)
},
// 取消框选
cancelBrush() {
this.brushDom
.call(
d3.brush()
.on('.brush', null)
.extent([
[0, 0],
[0, 0]
])
)
d3.select('#brushContainer').selectAll('*').remove()
this.brushDom.attr('fill', false)
.attr('pointer-events', false)
.attr('style', false)
document.getElementById('brushContainer').style.display = 'none'
this.brushDom = null
},
// 框选高亮
selectPointsInArea(selection) {
this.pause() // 暂停图动画
this.graph.selectNodesInRange(selection) // cosmograph自带方法（提供框选坐标可以使其节点高亮）
}
}
Resumir
El código de d3 en la figura solo logra la selección de fotogramas para obtener las coordenadas de posición del rectángulo de selección de fotogramas. Después de obtener las coordenadas, los nodos y bordes resaltados se realizan utilizando la API de cosmograph.