Como posso especificar a biblioteca de micro D3 V4 em CDN?

Question

Como posso especificar a biblioteca de micro D3 V4 em CDN?

quero carregar um microlibrário com cdn.

Há algum código de amostra que funciona normalmente em algum lugar?

▼[3]} ▼ Índice.html

<script src="https://d3js.org/d3-scale.v1.js"></script>

▼Js

var yScale = d3.scaleLinear()
    .domain([10, 1200])
    .range([0, 500]);
console.log(yScale(1200));
console.log(d3.version);

Erro

erro de Digitação: d3Color.cubehelix não é uma função.

1

d3.js

Author: re1, 2017-06-06

Source

1 answers

score 2 · Accepted Answer

AAPI é muito clara a este respeito: se quiser referenciar os microlibrários a usar d3.scale, tem de referenciar todos estes:

<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-format.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>

Além disso, a API diz:

Pode omitir o d3-time e o D3-time-format se não estiver a usar o d3.escaletime ou d3.scaleUtc

Aqui está uma demonstração:

var yScale = d3.scaleLinear()
  .domain([10, 1200])
  .range([0, 500]);
console.log(yScale(1200));
console.log(d3.version);

<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-format.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>

Como pode ver, {[6] } só funciona com o pacote predefinido, e irá voltar undefined aqui.

Assim, uma solução mais fácil é apenas referenciar o pacote padrão. Para o minificado:

<script src="https://d3js.org/d3.v4.min.js"></script>

E para o não minificado:

<script src="https://d3js.org/d3.v4.js"></script>