Skip to content
This repository has been archived by the owner on Jun 25, 2020. It is now read-only.

fix(forcedirected.js): make force directed graph zoomable and pannable #393

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix(forcedirected.js): make force directed graph zoomable and pannable #393

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e83c0da
fix(forcedirected.js): make force directed graph zoomable and pannable
IndexOutOfRange Mar 8, 2020
d7ba315
fix(forcedirected.js): size of the graph computed from props
IndexOutOfRange Mar 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 34 additions & 9 deletions packages/superset-ui-legacy-plugin-chart-force-directed/src/ForceDirected.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,18 @@ const propTypes = {
/* Modified from http://bl.ocks.org/d3noob/5141278 */
function ForceDirected(element, props) {
const { data, width, height, linkLength = 200, charge = -500 } = props;

let w = window.innerWidth;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The chart does not always have width and height being 100% of the window width and height.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the input. I commited a version where width/height are inherited.

let h = window.innerHeight;
const minZoom = 0.1;
const maxZoom = 7;
const div = d3.select(element);
const zoom = d3.behavior.zoom().scaleExtent([minZoom, maxZoom]);
div.classed('superset-legacy-chart-force-directed', true);

const links = data;
const nodes = {};

// Compute the distinct nodes from the links.
links.forEach(link => {
link.source =
Expand Down Expand Up @@ -82,6 +89,9 @@ function ForceDirected(element, props) {
nodes[targetName].total += link.value;
});

div.selectAll('*').remove();
const svg = div.append('svg');
const g = svg.append('g');
/* eslint-disable no-use-before-define */
// add the curvy lines
function tick() {
Expand All @@ -107,15 +117,22 @@ function ForceDirected(element, props) {
.on('tick', tick)
.start();

div.selectAll('*').remove();
const svg = div
.append('svg')
.attr('width', width)
.attr('height', height);
function resize() {
const { innerWidth, innerHeight } = window;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using window 's innerWidth and innerHeight makes the chart expand beyond its supposed size.

svg.attr('width', innerWidth).attr('height', innerHeight);

force
.size([
force.size()[0] + (innerWidth - w) / zoom.scale(),
force.size()[1] + (innerHeight - h) / zoom.scale(),
])
.resume();
w = innerWidth;
h = innerHeight;
}

// build the arrow.
svg
.append('svg:defs')
g.append('svg:defs')
.selectAll('marker')
.data(['end']) // Different link/path types can be defined here
.enter()
Expand All @@ -132,7 +149,7 @@ function ForceDirected(element, props) {

const edgeScale = d3.scale.linear().range([0.1, 0.5]);
// add the links and the arrows
const path = svg
const path = g
.append('svg:g')
.selectAll('path')
.data(force.links())
Expand All @@ -143,7 +160,7 @@ function ForceDirected(element, props) {
.attr('marker-end', 'url(#end)');

// define the nodes
const node = svg
const node = g
.selectAll('.node')
.data(force.nodes())
.enter()
Expand All @@ -170,6 +187,9 @@ function ForceDirected(element, props) {
.transition()
.style('font-size', 12);
})
.on('mousedown', function() {
d3.event.stopPropagation();
})
.call(force.drag);

// add the nodes
Expand All @@ -187,6 +207,11 @@ function ForceDirected(element, props) {
.attr('x', 6)
.attr('dy', '.35em')
.text(d => d.name);
zoom.on('zoom', function() {
g.attr('transform', `translate(${d3.event.translate})scale(${d3.event.scale})`);
});
svg.call(zoom);
resize();
}

ForceDirected.displayName = 'ForceDirected';
Expand Down