mirror of https://github.com/apache/superset.git
Refactor force-directed graph (#5691)
* Refactor and add props to Force Directed Graph * update label and enable renderTrigger
This commit is contained in:
parent
ebe585df3d
commit
3929f0f79d
|
@ -838,6 +838,7 @@ export const controls = {
|
|||
|
||||
link_length: {
|
||||
type: 'SelectControl',
|
||||
renderTrigger: true,
|
||||
freeForm: true,
|
||||
label: t('Link Length'),
|
||||
default: '200',
|
||||
|
@ -847,6 +848,7 @@ export const controls = {
|
|||
|
||||
charge: {
|
||||
type: 'SelectControl',
|
||||
renderTrigger: true,
|
||||
freeForm: true,
|
||||
label: t('Charge'),
|
||||
default: '-500',
|
||||
|
|
|
@ -1398,7 +1398,7 @@ export const visTypes = {
|
|||
},
|
||||
|
||||
directed_force: {
|
||||
label: t('Directed Force Layout'),
|
||||
label: t('Force-directed Graph'),
|
||||
controlPanelSections: [
|
||||
{
|
||||
label: t('Query'),
|
||||
|
|
|
@ -1,18 +1,34 @@
|
|||
/* eslint-disable no-param-reassign */
|
||||
import d3 from 'd3';
|
||||
import PropTypes from 'prop-types';
|
||||
import './directed_force.css';
|
||||
|
||||
require('./directed_force.css');
|
||||
const propTypes = {
|
||||
data: PropTypes.arrayOf(PropTypes.shape({
|
||||
source: PropTypes.string,
|
||||
target: PropTypes.string,
|
||||
value: PropTypes.number,
|
||||
})),
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
linkLength: PropTypes.number,
|
||||
charge: PropTypes.number,
|
||||
};
|
||||
|
||||
/* Modified from http://bl.ocks.org/d3noob/5141278 */
|
||||
const directedForceVis = function (slice, json) {
|
||||
const div = d3.select(slice.selector);
|
||||
const width = slice.width();
|
||||
const height = slice.height();
|
||||
const fd = slice.formData;
|
||||
const linkLength = fd.link_length || 200;
|
||||
const charge = fd.charge || -500;
|
||||
function ForceDirectedGraph(element, props) {
|
||||
PropTypes.checkPropTypes(propTypes, props, 'prop', 'ForceDirectedGraph');
|
||||
|
||||
const links = json.data;
|
||||
const {
|
||||
data,
|
||||
width,
|
||||
height,
|
||||
linkLength = 200,
|
||||
charge = -500,
|
||||
} = props;
|
||||
const div = d3.select(element);
|
||||
|
||||
const links = data;
|
||||
const nodes = {};
|
||||
// Compute the distinct nodes from the links.
|
||||
links.forEach(function (link) {
|
||||
|
@ -160,9 +176,21 @@ const directedForceVis = function (slice, json) {
|
|||
node.append('text')
|
||||
.attr('x', 6)
|
||||
.attr('dy', '.35em')
|
||||
.text(function (d) {
|
||||
return d.name;
|
||||
});
|
||||
};
|
||||
.text(d => d.name);
|
||||
}
|
||||
|
||||
module.exports = directedForceVis;
|
||||
function adaptor(slice, payload) {
|
||||
const { selector, formData } = slice;
|
||||
const { link_length: linkLength, charge } = formData;
|
||||
const element = document.querySelector(selector);
|
||||
|
||||
return ForceDirectedGraph(element, {
|
||||
data: payload.data,
|
||||
width: slice.width(),
|
||||
height: slice.height(),
|
||||
linkLength,
|
||||
charge,
|
||||
});
|
||||
}
|
||||
|
||||
export default adaptor;
|
||||
|
|
Loading…
Reference in New Issue