CODEWITHSUNDEEP
javascriptd3.jsdimple.js
Maxime
Maxime

Reputation: 1335

D3 error when adding a serie in dimple JS

Good day,

In a JS module using dimple.js, I try to make an add/remove trend feature.

The way it is done, I add/remove series.

The add code is:

chart.addSeries(tag_list[i].name, dimple.plot.line)

The remove code is:

//Remove already drawn points.
chart.series[i].shapes.remove();
//Remove from series array.
chart.series.splice(i,1);

The add part works fine. The remove part as well.

However, whenever I try to add again a serie previously deleted, i get a D3 error, about selecting the new series:

Error: <circle> attribute cx: Expected length, "NaN".    
Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Element': '.dimple-marker.dimple-series-1.' is not a valid selector.

Here is a fiddle that reproduces the issue; http://jsbin.com/lezigoheyo/edit?js,output First click on toggle adds a new trend. Second click removes it. Third triggers the bug.

This leads me to believe that I have some bad data somewhere, which prevents the series to be drawn.

However, I am quite confident about my data, because, first of all, it works the first time I add it, and then, I added for debugging purposes:

    for (var j = 0; j < chart.series; j++) {
        for (var k = 0; k < chart.series[j]; k++) {
            if (!$.isNumeric(chart.series[j].data[k].value)) {alert("value error");}
            if (!$.isNumeric(chart.series[j].data[k].time)) {alert("time error");}
        }
    }

And it does not trigger.

I have tried adding it without removing it first, and it works well, so I can reasonably narrow the problem down to the remove part, but I don't understand what I go wrong.

I hope you guys can help me with this.

Have a nice day,

UPDATE June 8th. I've been working on this most of the night, and I found some interesting things, comparing my fiddle with http://jsbin.com/fasamexehe/edit?js,output, by ne8il, which does almost the same thing, but works.

Now the question becomes: Why does it work with bubbles and not with line?

Upvotes: 2

Views: 575

Answers (2)

HKL
HKL

Reputation: 11

Starting with a line plot using version dimple.v2.1.6 - the line plots shows up fine. However, the chart does not work after upgrading to dimple.v2.3.0.min.js. Similar error message.

Switched chart type to dimple.plot.bubble. Effect: No errors. All elements show correctly, but as bubbles.

Upvotes: 0

Maxime
Maxime

Reputation: 1335

I finally got it.

A dimple-plot-line creates two kinds of objects in the svg:

  • circle to represent data points, with opacity 0.
  • path to connect them, which is visible.

But, the array serie.shapes only contains the latter. Therefore, if the serie is removed using serie.shapes.remove, the circles remain in the chart, and, during the next attempt to build the chart, they get in the way.

The solution to properly remove a dimple-plot-line is to use a d3 selector to get all the involved shapes, and remove them. Hence the final solution, with i the index of the series to be deleted:

d3.selectAll(".dimple-series-" + i).remove();

Here is a corrected version of the fiddle in the initial question: http://jsbin.com/qororekoqe/edit?js,output

I hope it helps someone in the future!

Upvotes: 1

Related Questions