Наложение больших черных кругов scatterChart

У меня возникла очень странная проблема. Я использую более или менее тот же код, что и образец рассеянного экрана на веб-сайте nvd3 (но подключен к моему приложению ember.js), и я вижу, что красивый сюжет выходит только чтобы омрачить около 500 м. позже набором черных кругов, которые намного больше, но следуют одному и тому же контуру сюжета.

Если я прокомментирую эту строку в nv.d3.js:

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

это, похоже, не происходит, и график "работает" ala без анимации.

Кто-нибудь видел что-то подобное раньше?

Ответы

Ответ 1

Я только что наткнулся на эту проблему, и я думаю, что я это понял, хотя я не уверен, почему она не объяснила лучше нигде на страницах nvd3.

Вам нужно включить ссылку на таблицу стилей nvd3 в вашем html, который является файлом ./src/nv.d3.css в репозитории download/github.

Я предполагаю, что черные круги являются областями наведения для каждой точки на диаграмме, а стиль по умолчанию для пути в SVG заполнен черным цветом.

Я поднял вопрос о github, чтобы узнать, можно ли улучшить инструкции по установке для nvd3: https://github.com/novus/nvd3/issues/19.

Ответ 2

Оказывается, что даже если вы включаете файл css, точки все равно будут отображаться:

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

Кажется, что проблема связана только с диаграммами областей и линий, а точнее с подсказками:

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

Я сделал скрытые подсказки, например:

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

Я не уверен, что селектор css выше будет работать во всех случаях, проверьте элемент подсказки, чтобы убедиться, что вы скрываете правильный элемент.

PS: Я пытался прикрепить скриншоты, но, видимо, у меня недостаточно репутации: - (

Ответ 3

У меня возникла проблема с попыткой импортировать nvd3 scatterPlusLineChart в jsFiddle. Хотя я добавил внешнюю ссылку css, она не "принимает"; моим обходным путем было установить источник из nv.d3.css непосредственно в верхней части области CSS. Любые идеи?

Кроме того, если кто-то еще захочет сыграть с примером, он на

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

Обязательный код jsfiddle для удовлетворения SO.com, хотя он связан с ссылкой...

В: поле CSS

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

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

Ответ 4

Если вы новичок в Angular2, вы, возможно, забыли добавить:

encapsulation: ViewEncapsulation.None

который позволит загружать внешние таблицы стилей.