web-dev-qa-db-fra.com

d3js - d3.scale.category10 () ne fonctionne pas?

J'ajoute d3js à mon nouveau projet:

et faites un test simple pour vous assurer que cela fonctionne:

d3.select(".d3div").transition()
    .duration(750)
    .style("background-color", "black");

ce travail. Toutefois:

var colors = d3.scale.category10().domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);

cela donne une erreur:

myd3.js: 1 TypeError non capturé: impossible de lire la propriété 'category10' de indéfini

et j'essaie aussi une autre fonction:

d3.scale.linear()

avoir des erreurs:

myd3.js: 3 Uncaught TypeError: Impossible de lire la propriété 'linear' de indéfini

si je change l'importation en 

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

alors cela fonctionne pour les fonctions, mais l'animation transition ne fonctionne plus.

Je veux utiliser la dernière version. mais il semble y avoir des changements de portée dont je ne suis pas au courant. 

Comment puis-je résoudre ça?

javascriptd3.js
10
sooon

Il n'y a plus de d3.scale.category dans D3 v4.x. 

Selon le changelog , voici les changements:

d3.scale.category10 ↦ d3.schemeCategory10
d3.scale.category20 ↦ d3.schemeCategory20
d3.scale.category20b ↦ d3.schemeCategory20b
d3.scale.category20c ↦ d3.schemeCategory20c

Ce sont des jeux de couleurs qui ...

... sont conçus pour fonctionner avec d3.scaleOrdinal. 

Donc, au lieu de d3.scale.category10(), vous devrez utiliser:

var color = d3.scaleOrdinal(d3.schemeCategory10);

Voici la documentation pour les balances de catégorie: https://github.com/d3/d3-scale#schemeCategory10

PS: Vous n'avez pas besoin de définir le domaine pour une échelle ordinale comme celle-ci. Vérifiez cette démo:

var data = d3.range(10);

var svg = d3.select("svg");

var color = d3.scaleOrdinal(d3.schemeCategory10);

var circles = svg.selectAll(".circles")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", d=>10+d*25)
	.attr("cy", 50)
	.attr("r", 10)
	.attr("fill", d=>color(d));
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

27
Gerardo Furtado

Dans d3v4, vous devez utiliser d3.schemeCatgory : 

var colors = d3.scaleOrdinal(d3.schemeCategory10);
1
philantrovert

si quelqu'un utilise angular 2 

 var colorScale=d3Scale.scaleOrdinal(d3.schemeCategory10);

c'est la bonne façon.

0
sajabhoj