mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
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: {
|
link_length: {
|
||||||
type: 'SelectControl',
|
type: 'SelectControl',
|
||||||
|
renderTrigger: true,
|
||||||
freeForm: true,
|
freeForm: true,
|
||||||
label: t('Link Length'),
|
label: t('Link Length'),
|
||||||
default: '200',
|
default: '200',
|
||||||
@ -847,6 +848,7 @@ export const controls = {
|
|||||||
|
|
||||||
charge: {
|
charge: {
|
||||||
type: 'SelectControl',
|
type: 'SelectControl',
|
||||||
|
renderTrigger: true,
|
||||||
freeForm: true,
|
freeForm: true,
|
||||||
label: t('Charge'),
|
label: t('Charge'),
|
||||||
default: '-500',
|
default: '-500',
|
||||||
|
@ -1398,7 +1398,7 @@ export const visTypes = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
directed_force: {
|
directed_force: {
|
||||||
label: t('Directed Force Layout'),
|
label: t('Force-directed Graph'),
|
||||||
controlPanelSections: [
|
controlPanelSections: [
|
||||||
{
|
{
|
||||||
label: t('Query'),
|
label: t('Query'),
|
||||||
|
@ -1,18 +1,34 @@
|
|||||||
/* eslint-disable no-param-reassign */
|
/* eslint-disable no-param-reassign */
|
||||||
import d3 from 'd3';
|
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 */
|
/* Modified from http://bl.ocks.org/d3noob/5141278 */
|
||||||
const directedForceVis = function (slice, json) {
|
function ForceDirectedGraph(element, props) {
|
||||||
const div = d3.select(slice.selector);
|
PropTypes.checkPropTypes(propTypes, props, 'prop', 'ForceDirectedGraph');
|
||||||
const width = slice.width();
|
|
||||||
const height = slice.height();
|
|
||||||
const fd = slice.formData;
|
|
||||||
const linkLength = fd.link_length || 200;
|
|
||||||
const charge = fd.charge || -500;
|
|
||||||
|
|
||||||
const links = json.data;
|
const {
|
||||||
|
data,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
linkLength = 200,
|
||||||
|
charge = -500,
|
||||||
|
} = props;
|
||||||
|
const div = d3.select(element);
|
||||||
|
|
||||||
|
const links = data;
|
||||||
const nodes = {};
|
const nodes = {};
|
||||||
// Compute the distinct nodes from the links.
|
// Compute the distinct nodes from the links.
|
||||||
links.forEach(function (link) {
|
links.forEach(function (link) {
|
||||||
@ -160,9 +176,21 @@ const directedForceVis = function (slice, json) {
|
|||||||
node.append('text')
|
node.append('text')
|
||||||
.attr('x', 6)
|
.attr('x', 6)
|
||||||
.attr('dy', '.35em')
|
.attr('dy', '.35em')
|
||||||
.text(function (d) {
|
.text(d => d.name);
|
||||||
return 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
Block a user