0

i got a question in D3.js. I am able to click on circles and interact with them. To realise that, i defined a array named 

var array123

inside the function to click on of the circle. Now with this array i am able to save settings in it, for example to change sizes or colors of higher numbers of circles. The function looks like this:

      circle.on("click", function (d) {

        var array123 = start && start.path(d) || []
    link.style("stroke", function(d) 
                    {
                      return array123.includes(d.source) && array123.includes(d.target) ? "red" : "green";   
                    });
start = d
        .....}

My problem is now, that these settings are saved, once clicked on a circle and gets updated when click again on other circles. The question is, how can i reset the memory of the array from outside? For example i could create a rectangle and when i click on it, it resets all the memory of array123? I tried to do it with an array with the exact name (array123) but i wont overwrite the first one.

Derick Kolln
  • 633
  • 7
  • 17
  • 2
    Can't figure out what you are really asking (you are probably going to have to code up a minimal jsfiddle or plunker to demonstrate). **But** I can tell you that declaring `var array123 = []` inside your click callback makes variable `array123` scoped to that function and not available outside of it. – Mark Jan 14 '17 at 20:12
  • 2
    I would highly recommend that you [read and understand this](http://stackoverflow.com/a/500459/16363). – Mark Jan 14 '17 at 20:38
  • Thanks Mark, empty the array seems not working, could you help me out? I use `rectangle.on("click", function (d) { array123 = [];` – Derick Kolln Jan 14 '17 at 20:59
  • 2
    Again, while I can guess that you have scoping issues, you'll need to code up a to code up a minimal jsfiddle or plunker to demonstrate your troubles. I don't understand what you are trying to do. – Mark Jan 14 '17 at 21:11
  • Hey Mark, i would love to, my Plunker makes problems. I tried to copy and paste it from Notepad++ but it did not worked. I will retry later on JSfiddle. – Derick Kolln Jan 15 '17 at 00:33
  • Hey, i just found the solution by myself. I just used another click function with the same array and used `start = 0`. That deleted all the memory of the array. Thanks to both! – Derick Kolln Jan 15 '17 at 23:20

1 Answers1

3

Make that array variable declaration outside that function like so:

var array123; circle.on("click", function (d) { array123 = start && start.path(d) || []; code to maipulate and save the array .....}

Then you can use the same variable anywhere else within the scope. By declaring a variable inside, you are limiting the scope.

Vignesh T.V.
  • 1,790
  • 3
  • 27
  • 48
  • thanks guys, i just edited my code above...@vignesh: i tried your advice, but the result is, that i won't change the links color anymore. Explanation: It is a force diagram in d3 with circles and links. I can click on 2 circles and highlight the path (color of the links) between them. That is the reason why i am using `var array123 = start && start.path(d) || []` That start.path(d) is a function of D3.js, which returns the shortest way between the first clicked circle (start) and the second clicked circle (d). – Derick Kolln Jan 14 '17 at 20:28
  • 1
    @DerickKolln: edited my answer. this will work for you. – Vignesh T.V. Jan 14 '17 at 20:30
  • Wow, this really works, thanks to you both Mark and Vignesh. One question: Why is it not working when use `var array123 = start && start.path(d) || []` outside of the click function? Is it because of the `start.path()` function? – Derick Kolln Jan 14 '17 at 20:33
  • And also: If i want to clear that array from outside when click on a new rectangle. Is `rectangle.on("click", function (d) { array123 = [];` the way to go? – Derick Kolln Jan 14 '17 at 20:36
  • 1
    @DerickKolln: You cannot use that outside that function since parameter "d" is undefined outside the function and comes up only when click event happens. – Vignesh T.V. Jan 14 '17 at 20:37
  • understand, i tried now `rectangle.on("click", function (d) { array123 = [];` , but it does not work, the memory of the array is still there – Derick Kolln Jan 14 '17 at 20:41
  • 1
    @DerickKolln: You cannot do that. This is the only way to go about this cause even if you define d outside, that d and the variable "d" which fires up onclick will be different. The variable d here is the event object. You would have to learn more of javascript basics to understand this better. – Vignesh T.V. Jan 14 '17 at 20:45
  • Can you post the whole code? It's quite difficult to understand what you are trying to achieve by seeing just a part. I would guess your problem is trying to update the elements and the data all at once. With D3, the approach would be to keep all the data bound to the elements so whenever you update the data (upon click on elements, for example), you trigger a refresh of the whole thing, and everything changes accordingly to what was described using D3's selection, enter, exit and update declarations. – Óscar Gómez Alcañiz Jan 15 '17 at 00:06