Large black circles overlay scatterChart

Question

I am having a very strange problem - I am using more or less the same code as the scatterplot sample on the nvd3 web site (but hooked into my ember.js app) and I'm seeing a beautiful plot come out only to be marred about 500ms later by a set of black circles that are much larger but follow the same contour of the plot.

If I comment out this line in nv.d3.js:

gEnter.append('g').attr('class', 'nv-point-paths');

this doesn't seem to happen and the graph "works" ala without the animations.

Has anyone seen something like that before?

Speculator

Answer 1

I have just come across this issue myself, and I think I have figured it out, although I am not sure why it's not explained better on the nvd3 pages anywhere.

You need to include a reference to the nvd3 stylesheet in your html which is the ./src/nv.d3.css file in the download/github repo.

My guess is that the black circles are the hover regions for each point on the chart, and the default style for a path in SVG is black filled.

I have raised an issue on github to see if we can get the installation instructions for nvd3 improved: https://github.com/novus/nvd3/issues/19.

Gutierrez

I included the reference by <link rel="stylesheet" type="text/css" href="https://raw.github.com/novus/nvd3/master/src/nv.d3.css"/> in my html file. But it still shows the black dots. – Redheaded

Also, as B N pointed out below make sure you add the encapsulation: ViewEncapsulation.None after styleUrls in the component definition. – Dispute

Answer 2

It turns out that even if you include the css file the dots will still show up:

https://dl.dropboxusercontent.com/u/318531/so/black-dots.png

It appears to be an issue only with area and line charts, more specifically with the tooltips:

https://dl.dropboxusercontent.com/u/318531/so/selector.png

What I did was hide the tooltips, like this:

<style media="print">    
  .nv-point-paths {
    display: none !important;
  }
</style>

I'm not sure if the css selector above will work in all cases, inspect the tooltip element to make sure you are hiding the right element.

PS: I tried to attach screenshots but apparently I don't have enough reputation :-(

Fruitarian

Answer 3

If you are new to Angular2, you may have forgotten to add:

encapsulation: ViewEncapsulation.None

which would allow external stylesheets to be loaded.

Sidonie

Answer 4

I had this problem trying to import the nvd3 scatterPlusLineChart into jsFiddle. Although I added the css external reference, it isn't 'taking'; my workaround was to put the source from nv.d3.css directly in at the top of the CSS region. Any ideas?

Also, in case anyone else wanted to play with the example, it's at

http://jsfiddle.net/mr23/JHWNr/1/

Obligatory jsfiddle code to satisfy SO.com, even though it's about a reference...

In: CSS field

/********************
 * HTML CSS
 */

.chartWrap {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

Larue