Lafaiet Silva edited this page Jun 9, 2016 · 302 revisions

D3.js é uma biblioteca JavaScript para manipulação de documentos baseados em dados. D3 ajuda a trazer dados para a vida fazendo uso de HTML, SVG and CSS. A ênfase da biblioteca D3 em padrões web lhe proporciona todos os recursos de navegadores modernos sem amarrar você a um framework, combinando poderosos componentes de visualização e uma abordagem orientada à dados para a manipulação do Documento Object Model (DOM).

Recursos

Browser / Suporte da plataforma

D3 suporta os chamados navegadores "modernos", o que geralmente significa tudo exceto IE8 e versões mais antigas. D3 é testado com Firefox, Chrome, Safari, Opera, IE9+, Android e iOS. Partes de D3 podem funcionar em navegadores mais antigos, uma vez que o núcleo da biblioteca do D3 possui requisitos mínimos: JavaScript a API [W3C DOM] (http://www.w3.org/DOM/). D3 utiliza o [Selectors API] (http://www.w3.org/TR/selectors-api/) Level 1, mas você pode pré carregar o [Sizzle] (http://sizzlejs.com/) para compatibilidade. Você precisará de um navegador moderno para usar [SVG] (http://www.w3.org/TR/SVG/) e [Transições em CSS3] (http://www.w3.org/TR/css3-transitions/). D3 não é uma camada de compatibilidade, por isso, se o seu navegador não suporta padrões, você está sem sorte. Desculpe!

D3 também roda no Node.js. Use 'npm install d3' para instalar.

Observe que como o próprio Node carece de um DOM e por diversas implementações DOM existirem para ele (por exemplo, [JSDOM] (https://github.com/tmpvar/jsdom)), você vai precisar passar explicitamente em um elemento DOM ao seu d3 métodos assim:

var d3 = require("d3"),
    jsdom = require("jsdom");

var document = jsdom.jsdom(),
    svg = d3.select(document.body).append("svg");

D3 também consegue rodar dentro de um WebWorker criando uma build costumizada contendo apenas as features, não pertencentes ao DOM, desejadas.

Instalando

Baixe a última versão aqui:

Ou, para um link direto com a última versão, copie o trecho:

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Nota: o código-fonte não minificado contém caracteres não pertencentes à tabela ASCII e deve ser mantido com codificação UTF-8, quer através do charset ="utf-8" atributo na tag script ou adicionando <meta charset = "utf-8"> no início da página. Se você se deparar com um SyntaxError: Unexpected token ILLEGAL at var Ï€ = Math.PI, é porque você está servindo a fonte não minificada com a codificação ISO-8859-1 incorreta. Veja esta [resposta no StackOverflow] (http://stackoverflow.com/a/14301241) para obter mais informações.

Se você quiser o repositório completo, incluindo testes, faça o download ou clone o repositório D3 no Git:

D3 também está disponível via inúmeros gerenciadores de pacotes, incluindo: NPM (Node.js), Bower, Browserify, Component, Jam, Composer / Packagist (PHP), SPM, JSPM, NuGet (.Net), and AMD (por exemplo, RequireJS). Lançamentos oficiais da biblioteca D3 estão no NPM e GitHub apenas; suporte para outros gerenciadores não são oficiais e são mantidos por contribuidores.

Usando

Quando desenvolvendo localmente, note que seu browser pode impor permissões estritas para a leitrua de arquivos do sistema de arquivos locais. **Se você utilizar d3.xhr localmente (Incluindo d3.json etc.), você deve ter um servidor web local. **Por exemplo, você pode rodar um servidor Python built-in.

python -m SimpleHTTPServer 8888 &

ou para Python 3+

python -m http.server 8888 &

Se você tem PHP instalado você pode tentar

php -S localhost:8888

Ou se você estiver rodando em Ruby, poderá usar

ruby -run -e httpd . -p 8888

Uma vez rodando, vá para http://localhost:8888/.

Ou, se estiver rodando em Node.js, use

npm install http-server -g
http-server

Outra opção é inciar uma jetty instance, usando a biblioteca jetty-runner com a JVM já instalada. Para conseguir isso você precisa baixar a jetty-runner, depois, você pode simplesmente digitar:

java -jar jetty-runner-9.3.0.M0.jar  --port 8080  .

O trecho vai deixar o servidor on em http://localhost:8080 como de costume a partir do diretório atual, ou um diretório diferente, simplesmente mudando '.' para o caminho do diretório.

D3 suporta a API de definição de módulo assíncrono (asynchronous module definition)(AMD). Por exemplo, se você usar RequireJS, você pode carregar como a seguir:

require.config({paths: {d3: "http://d3js.org/d3.v3.min"}});

require(["d3"], function(d3) {
  console.log(d3.version);
});

Modificando

Se você quiser modificar o modo como D3 foi implementado, clique no botão "Fork" no topo-direito da página, e depois clone seu fork a partir da linha de comando substituindo o username pelo seu nome no GitHub:

git clone git://github.com/username/d3.git

O repositório D3 deve trabalhar "out of the box" (sem a necessidade de download do projeto) se você quiser apenas criar novas visualizações usando D3. Por outro lado, se você quiser extender a biblioteca D3 com novas features, arrumar bugs, ou rodar testes, você deve dar fork neste repositório D3, e instalar Node.js (versão 0.10.x ou maior). A partir da raiz desse diretório, você pode instalar as depêndencias da biblioteca D3.

npm install

Para rodar os testes use:

make test
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.