Only draw targets for lines and areas that have a valid path

Before, it was drawing svg path elements for all the segments,
even those that were clipped out of view (getPath returns null).
This was putting a lot of junk into the DOM.
This commit is contained in:
Bryan Housel
2018-03-01 22:49:56 -05:00
parent 69a1a75b49
commit cc79e2170b
2 changed files with 8 additions and 5 deletions
+4 -3
View File
@@ -58,9 +58,10 @@ export function svgAreas(projection, context) {
// Targets allow hover and vertex snapping
var targetData = data.targets.filter(getPath);
var targets = selection.selectAll('.area.target-allowed')
.filter(function(d) { return filter(d.properties.entity); })
.data(data.targets, function key(d) { return d.id; });
.data(targetData, function key(d) { return d.id; });
// exit
targets.exit()
@@ -75,9 +76,10 @@ export function svgAreas(projection, context) {
// NOPE
var nopeData = data.nopes.filter(getPath);
var nopes = selection.selectAll('.area.target-nope')
.filter(function(d) { return filter(d.properties.entity); })
.data(data.nopes, function key(d) { return d.id; });
.data(nopeData, function key(d) { return d.id; });
// exit
nopes.exit()
@@ -92,7 +94,6 @@ export function svgAreas(projection, context) {
}
function drawAreas(selection, graph, entities, filter) {
var path = svgPath(projection, graph, true),
areas = {},
+4 -2
View File
@@ -54,9 +54,10 @@ export function svgLines(projection, context) {
// Targets allow hover and vertex snapping
var targetData = data.targets.filter(getPath);
var targets = selection.selectAll('.line.target-allowed')
.filter(function(d) { return filter(d.properties.entity); })
.data(data.targets, function key(d) { return d.id; });
.data(targetData, function key(d) { return d.id; });
// exit
targets.exit()
@@ -71,9 +72,10 @@ export function svgLines(projection, context) {
// NOPE
var nopeData = data.nopes.filter(getPath);
var nopes = selection.selectAll('.line.target-nope')
.filter(function(d) { return filter(d.properties.entity); })
.data(data.nopes, function key(d) { return d.id; });
.data(nopeData, function key(d) { return d.id; });
// exit
nopes.exit()