Sorting text with .join

Community Help
1

Hello,

I’m happily struggling on finding a way to filter a force directed graph based on user input (previous question)

This gave me an excuse to revisit and finish the french translation of the reference notebook on views as mutable values.

Great, learning stuff about Generator.dispach, but, before going back to my original problem I still needed to master the join feature. I unearth an old unfinished notebook about sorting text and tried to improve it with newly learn the Generator.dispatch expressions.

And yes ! I slowly but consistently make progress. Although I far from been satisfied with my work, I’m sure they are things in my last notebook that I coded in a cumbersome way.
Feedback about it from members of this great community would be welcome to help me move my code skills forward.

For example, I still don’t understand why the update is not happening.

Thank you

2

I’m not sure what update you are referring to. When I click the sort button repeatedly the list items update accordingly. Perhaps you can fork your notebook and remove any cells that are not directly related to the problem?

Some other points I want to mention:

  • Use [] instead of new Array().
  • Your deep_copy() does not create a deep copy (i.e. all objects are dereferenced). It currently creates the equivalent of Array.slice().
    To create an actual deep copy, use JSON.parse(JSON.stringify(object_or_array)).
  • Use const instead of let whenever possible. That way you can quickly spot where reassignment is actually happening. Note that using const does not prevent you from modifying arrays and objects.
2 Likes
3

Thank you a lot for your remarks and good tips. Merci

By update I mean the .join(... update => . It does not seem to fire as the all the items stay green and not transition effect is activated.

4

Just one question concerning your last point. How would you modify an array or an object declared with const ?

5

Any operation will work as long as it does not require you to reassign a value to the variable.
E.g.:

const obj = {foo: 'bar1'};
// Set a single property.
obj.foo = 'bar2';
// Set multiple properties.
Object.assign(foo, {test: 123});

const arr = [1, 3, 2];
// Sort in-place.
arr.sort((a,b) => a-b);
// Add three items to the beginning.
arr.unshift(-2, -1, 0);
// Add three items to the end.
arr.push(4, 5, 6);
// Remove the first three items.
arr.splice(0, 3);
// Empty the array.
arr.length = 0;

You need let mostly when you’re working with scalar (i.e. basic) types like strings, numbers, booleans. Examples:

for(let i = 0; i < 5; i++) { /* ... */ }

let count = 0;
arr.forEach(v => {
  if(v.hasSomeProp) count++;
});

let doSomething = false;
/* ... */
if(someCaseApplies) doSomething = true;
/* ... */
if(someOtherCaseApplies) doSomething = false;
2 Likes
6

Ok, I get it.

7

Every click causes the chart cell to reevaluate, creating new svg and g elements. As a result there’s nothing to update when you call draw_chart().

Try reusing your cell’s element:

const svg = d3.select(this || DOM.svg(dim.W, dim.H));
// Theoretically you could use a data join here as well, but it would likely be overkill.
const g = this ? svg.select('g') : svg.append('g');
1 Like
8

That’s the part I was missing in my understanding… thank you

1 Like