CODEWITHSUNDEEP
nvd3.js
outside2344
outside2344

Reputation: 2105

Large black circles overlay scatterChart

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?

Upvotes: 12

Views: 2430

Answers (4)

Boshra N
Boshra N

Reputation: 111

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

encapsulation: ViewEncapsulation.None

which would allow external stylesheets to be loaded.

Upvotes: 2

Esdras Mayrink
Esdras Mayrink

Reputation: 175

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 :-(

Upvotes: 2

sw.chef
sw.chef

Reputation: 61

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;
}

Upvotes: 1

latentflip
latentflip

Reputation: 1883

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.

Upvotes: 21

Related Questions