2016-10-27 1 views
4

Я пытаюсь заставить D3 работать в powerBI, чтобы я мог создавать собственные визуальные эффекты. Я пришел к нему с конца D3, и я не знаком с машинописным, powerBI или даже терминальным приложением (am на mac).Typcript, D3 и powerBI: Как мне получить машинописный шрифт, чтобы поговорить с D3 v4?

У меня есть D3 V3, используя это: https://github.com/Svjard/d3-typescript. Я поместил файл d3.d.ts в папку .tmp/precompile/src и ссылался на файл из visual.ts. Первоначально я включил data.ts и tsconfig.json, но я нашел, что они не нужны.

Но я бы хотел использовать D3 V4. Есть обработчик для D3 V4, благодаря определенному типу: https://github.com/tomwanzek/d3-v4-definitelytyped. Я запустил npm install @types/d3-selection --save и взял файл index.d.ts, поместив его в папку .tmp/precompile/src и повторно ссылаясь на visual.js, но без радости. Я переименовал его в d3.d.ts в случае, если это помогло: нет. Я использовал definitTyped package.json вместо генерируемого powerBI, но это тоже не помогло (и я подозреваю, что неправильно понял, для чего этот файл!).

Я получаю сообщение об ошибке из терминала приложения: error on typescript-d3 compile

Код выглядит совсем по-другому. Это надрез файла (v3), которая работает:

interface ID3Selectors { 
    select: (selector: string) => ID3Selection; 
    selectAll: (selector: string) => ID3Selection; 
} 

interface ID3Base extends ID3Selectors { 

А вот надрез другого файла, который не работает:

export type BaseType = Element | EnterElement | Window; 

/** 
* A helper interface which covers arguments like NodeListOf<T> or HTMLCollectionOf<T> 
* argument types 
*/ 
export interface ArrayLike<T> { 
    length: number; 
    item(index: number): T; 
    [index: number]: T; 
} 

Кто-нибудь знает, как я получаю машинопись говорить до D3 V4?

благодаря ...

Эмма


EDIT 31 октября 2016 Спасибо за ответы. Когда я запустил tsc -v в CLI, он сказал 2.0.6.

Я улучшил свою ситуацию, но не добрался до V4. В случае использования, это то, что я сделал и что сработало. Там, казалось, три предложенные методы:

(1) Следуя инструкциям здесь не работает для меня: https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/ExternalLibraries.md

инструкции (2) После здесь сделали работу: https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/Typings.md

Это был связан с использованием CLI и НПМ для установки типоразмеров. Затем добавьте пиктограммы в папку проекта, снова с инструкциями из вышеприведенной ссылки Typings.md. Это создало папку под названием «typings». Я обновил tsconfig для загрузки index.d.ts. Я удалил ссылку на d3.d.ts из visuals.js.

Улучшение значимо. Этот index.d.ts является версией 3, как последний файл, который я использовал, d3.d.ts. Однако, в отличие от последней ссылки, она, похоже, поддерживает события кликов и, возможно, другие вещи, которые мне еще предстоит обнаружить.

(3) Я следовал инструкциям Tom W (для чего спасибо), и теперь у вас есть папка выбора d3, а также папка выбора @types d3. Однако я не мог заставить команду import работать в моем файле visuals.ts. Я пробовал в разных местах, внутри и снаружи функций. Я также скопировал папку выбора d3 из node_modules (не уверен, что я должен был!).

Atom software showing visual.ts


EDIT 1 ноября 2016 года Еще раз спасибо за помощь. Но я больше не вперед. Одним из моих ключевых недоразумений является то, что необходимы как внешние/d3.v4.js, так и установка npm. Неужели это одно или другое?

метод (1) Внешний/d3.v4.js @Jan - у вас есть D3 v4 работает в энергетике BI? Если да, то какой именно код npm вы запускали и что еще вы делали? Мой тестовый код выглядит так (var x = d3.scaleLinear();) - если вы с успехом можете скомпилировать этот код, скажите, как вы это сделали!

Atom showing visual.ts file with d3 v4 code

Я включил d3.v4.js в папку с именем внешней и ссылки его в tsconfig.json. Это кажется правильным. Но компиляция Power BI в терминале терпит неудачу, с сообщением об ошибке: Не удается найти имя «d3». Есть ли other command needed?

(2) Смешивание в приближении npm @Tom, спасибо и я выполнили ваши инструкции. Вот мои node_modules: node_modules folder

Смутно npm install @types/d3 --save-dev создал новую папку node_modules в существующем. Как только вы установили с npm, скопируйте или переместите папку (например, в корневой проект power bi)? Я не вижу, как Power BI может найти эти файлы.

@types folder within node_modules

Я положил d3.v4.js файл на внешние/и ссылки его с опорной линией и типы атрибутов устанавливается на d3. Компилятор сказал: «Недействительная ссылочная директива». Я изменил типы на путь и попытался установить путь к external/d3.v4.js, но powerBI кажется жестко закодированным для просмотра в папке .tmp/precompile.

У меня есть файл d3, загруженный, правда, удалив ссылку ссылки и вместо этого используйте tsconfig.json от powerBI. Но я вернулся туда, где был. Файл загружается, но d3 не является распознанным именем.

Звучит так, как если бы я подождал, пока Microsoft выполнит свою задачу, я смогу использовать метод типирования, чтобы добраться до V4. Но это так раздражает. Документация Microsoft говорит, что я могу использовать предварительно загруженную d3 или загружать собственную копию d3 без каких-либо npm. Мне не хватает команды, чтобы распознать пространство имен d3!

+0

Это кажется бессмысленным, если ваша цель - опубликовать на powerbi.com. –

+0

Какая часть вас поражает? Чтобы создать пользовательский визуал, мне нужно использовать D3, и я предпочел бы использовать V4, чем V3. – emma

+0

Как вы планируете его публиковать? Предположим, что это для powerbi.com, поэтому вам, вероятно, придется соблюдать то, что они поддерживают. –

ответ

0

Из вывода компилятора он выглядит так, как будто файл с образцами недействителен.

Я быстро просмотрел репозиторий для V4, и он говорит, что он был создан для typoscript 2. +. Я не знаю, как владеть BI-поддержкой, но пока я не знаком с программным обеспечением, но, возможно, стоит заглянуть в нее. Я бы посмотрел на это первым, поскольку компилятор пытается сказать вам, что синтаксис в .d.ts-файле даже не близок к действительности.

Я взглянул на машинописный текст для силовой BI, и, по-видимому, он использует файл tsconfig.json, чтобы определить, какие файлы следует создавать и в каком порядке, так что это было бы неплохое место для начала поиска. Возможно, вы ссылаетесь на файлы, которые не были загружены в этот момент.

Удачи, и если вы получите какую-то новую информацию, возможно, стоит изменить свой вопрос для получения более точной помощи.;)

2

Текущие определения для D3 v4 были полностью перенесены с https://github.com/tomwanzek/d3-v4-definitelytyped на DefinitelyTyped (в настоящее время в ветку types-2.0). Вот где они теперь поддерживаются и управляются проблемы.

Филиал публикует в НОГО @types организации, которая является новым «стандартным» механизмом для файлов определение публикации и приобретающих с машинописью 2.

Важно, что для использования этих определений вам понадобится TypeScript 2 (не менее 1.9.x-dev). Глядя на ошибку компилятора, я подозреваю, что вы можете скомпилировать ее с TS 1.8.x. Мое несколько образованное предположение основано на том, что он набрасывается на this, другие ошибки совпадают. В новых определениях, которые я написал, используется this -typing для контекстов функций, которые не поддерживались в 1.8.x.

Таким образом, установка powerBI в сторону ни на секунду, что вы хотите установить, импортировать и использовать d3-selection модуль, вы бы:

(1) Установите фактический модуль npm install d3-selection --save

(2) Установить соответствующий файл определения npm install @types/d3-selection --save (или --save-dev если вы не пишете библиотеку для потребления третьей стороны)

(3) в модуле, где требуется d3 отбор, вы просто импортировать в стандартном машинописном/ES6 образом:

import * as d3Selection from 'd3-selection'; 

let svg = d3Selection.select('svg'); // or whatever you may be up to 

Обратите внимание на то, что определения, устанавливаемые с @types/d3, соответствуют стандарту D3 v4 Standard Bundle, опубликованному Майком Бостоком. (До вчерашнего дня «последняя» версия была еще определение v3.5.x D3.)

В качестве альтернативы, если ваш вариант использования основан на использовании D3 в ванильным сценария в (а не с импортом модуля) чтобы заставить его работать с powerBI, тогда дайте мне знать, и я могу дать дополнительные рекомендации.

1

Ответ tom (https://stackoverflow.com/a/40315607/7094192) должен помочь вам включить D3 v4 с пользовательскими визуализацией Power BI. Документация по визуальному API-интерфейсу Power BI дает некоторые рекомендации по использованию внешней библиотеки вместе с вашим визуальным визуализацией Power BI: https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/ExternalLibraries.md. Добавление ссылки на index.d.ts в файле tsconfig.json должно быть достаточно.

По умолчанию Power BI вводит D3 v3.5.5 для использования пользовательскими визуальными эффектами, и в этом случае достаточно установить только типичные данные: https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/Typings.md Но, конечно, это может быть изменено в будущем.

UPDATE 4 декабря 2016:

Наконец было некоторое время, чтобы попробовать себя, и я получил d3js v4 работает с питанием BI. Я не; верьте, что это полный правильный способ (слишком много ручных изменений), но он работает :-).Есть шаги, которые я исполненные:

  1. Я rollup с входным скриптом (custom.d3.js) со всеми d3js модули, необходимые (здесь только d3.version):

    export { 
        version 
    } from './node_modules/d3/build/package'; 
    
  2. Created версию iife через rollup.config.js :

    import nodeResolve from 'rollup-plugin-node-resolve' 
    export default { 
        entry: 'custom.d3.js', 
        dest: 'external/d3.js', 
        format: 'iife', 
        moduleName: 'd3', 
        plugins: [ nodeResolve({jsnext: true}) ] 
    } 
    
  3. Создание пользовательских d3 JS v4 файл (d3.js) через rollup -c

  4. Вручную редактировал d3.js файл

    • добавить var d3; в верхних
    • заменить все exports с d3
    • изменить последнюю строку файла })(d3 || (d3 = {}));

Эти шаги создадут работоспособный js-файл, который может быть включен в выходной встроенный скрипт Power BI может обрабатывать посредством добавления ссылки в файл tsconfig.json.

Для intellisense я использовал новые титры, которые @tom разговаривал через npm install @types/d3 --save-dev (в зависимости от модулей, которые вы используете). Чтобы включить intellisense в файле visual.ts, я добавил /// <reference types="d3" /> сразу после строки module powerbi.extensibility.visual {.

Самым большим недостатком является, конечно, ручной шаг 4, но я не могу найти способ устранить это (пока). Возможно, кому-то с большим опытом работы с rollup может помочь.

Спасибо, JP

+0

Thanks Jan. Для других людей: эти инструкции (https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/ExternalLibraries.md) не сработали для меня: я включил d3.v4.js в папка под названием «external», ссылалась на нее из tsconfig, но не смогла использовать команды d3 в моем файле visual.ts. Типичная ссылка (независимо от того, «набрав» - https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/Typings.md).Это только V3, но он более всеобъемлющий, чем файл D3 V3, который я использовал в оригинальной записи (которая не поддерживала события щелчка). Казалось бы, нужен файл .d.ts для D3 V4. – emma

+0

При переходе к комментариям Яна и в связи с моим вопросом о том, импортируете ли вы или используете «глобальный» для доступа к D3, попробуйте следующее: Включите 'd3.v4.js' в свои внешние папки (если предположить, что PowerBi рассматривает это скорее ванильный скрипт, а не правильный модуль), а затем вместо инструкций 'typings': используйте' npm install @ types/d3 --save-dev' и добавьте '/// 'в начало скрипта, где вы используете D3. Это должно добавить «глобальный» 'd3' к вашему скрипту для использования, например. 'd3.select (...)' (Опять же, ключевой вопрос - модули v ванильный скрипт) – tomwanzek

+0

Привет, Эмма, действительно, ссылка «typings» работает для предоставленной d3 lib, которая является v3.I просто попробовал tom's way (наконец, рабочая среда рядом со мной), и похоже, что только команда 'npm' работает для версии v4. –