CODEWITHSUNDEEP
javascriptcsvd3.js
lager
lager

Reputation: 13

D3 exit selecting wrong data

I'm trying to build kind of real time graph using D3.js. Code is available at https://plnkr.co/edit/hrawv8CTBIsJf2QWTBMb?p=preview.

The source data represent user authentication results from different organizations. For each organization there is a name, ok count and fail count. The graph should be dynamically (getting the data in loop) updated based on data.

The code is based on https://bl.ocks.org/mbostock/3808234.

There are few problems and few things i'm not sure about.

exit function only selects the red bars based on data update:

  // JOIN new data with old elements
  // specify function for data matching - correct?
  var boxes = svg.selectAll(".box").data(data, function(d) {
    return d.inst_name;
  });

  // EXIT old elements not present in new data
  // this works somehow strange
  // it does select all red boxes
  boxes.exit().transition(t).remove();

Why does exit() select only red bars and not all? From my point of understanding the d3 documentation exit() should only select such elements that do not have any new data. Shouldn't that be all bars in case of infinite loop and constant data file?

This obviously breaks the graph quite a lot (see plunker). I need the exit to select only bars, which are not available in data file anymore. See example below.

initial state of data file: 

inst_name,ok,fail
inst1,24,-1
inst2,23,-3
...

updated state of data file: 

inst_name,ok,fail
inst1,26,-1
inst14,22,-4
...

The bars (both blue and red) for inst2 from intial state should be removed (and replaced by data of inst14) when the data is updated. Why is this not working?

I've read, that new data are matched against older using index. I've specified that inst_name should be used: 

  var boxes = svg.selectAll(".box").data(data, function(d) {
    return d.inst_name;
  });

Is this necessary (I've used it everywhere when inserting data)?

Also the transition for removing the elements does not work. What is the problem?

I'm also not sure if specifying data is necessary when adding new bars:

  var boxes = svg.selectAll(".box").data(data, function(d) {
    return d.inst_name;
  });

  .....

  // add new element in new data
  svg.selectAll(".blue")
    .data(data, function(d) {  // is this necessary ?
      return d.inst_name;
    }) // use function for new data matching against inst_name, necessary? 
    .enter().append("rect")
    .transition(t)
    .attr("class", function(d) {
      return "blue box "
    })
    .attr("x", function(d) {
      return x(d.inst_name);
    })
    .attr("width", x.bandwidth())
    .attr("y", function(d) {
      return y(d.ok);
    })
    .attr("height", function(d) {
      return height - y(d.ok + min);
    })

Thanks for help.

EDIT

The underlying data get changed by script (this was not written clearly in the original post), so it can change independently of the graph state. The data should be only growing.

Upvotes: 1

Views: 408

Answers (1)

Mark
Mark

Reputation: 108567

You've asked a lot of questions.

Why does exit() select only red bars and not all? From my point of understanding the d3 documentation exit() should only select such elements that do not have any new data. Shouldn't that be all bars in case of infinite loop and constant data file?

First, you build two sets of bars (blue [ok] and red [fail]). When you data bind these you give them the same key function, which identifies them by inst_name. You then do your data update, which now selects all the bars at once with:

 svg.selectAll(".box")

You again data-bind with the same key function. Your data has 10 values in the array but you just selected 20 bars. The second 10 bars exit (the red ones) because to d3 they are not in your 10 data-points

The bars (both blue and red) for inst2 from intial state should be removed (and replaced by data of inst14) when the data is updated. Why is this not working?

I don't see that in your plunker, you are giving it the same data over and over.

Also the transition for removing the elements does not work. What is the problem?

You haven't given the transition anything to do. It'll run it, then at the end remove the rects. What you need is something for it to transition, like "height":

boxes.exit().transition(t).attr('height', 0).remove();

This will shrink them to 0 height.

So how do we clean up your code?

First, I would operate on g elements each one paired to an item in your data array. You then place both bars in the g that belong to that data point. Take a look here, I've started to clean-up your code (incomplete, though, hopefully it gets you going).

Upvotes: 1

Related Questions