it-swarm.com.de

d3js - d3.scale.category10 () funktioniert nicht?

Ich füge d3js zu meinem neuen Projekt hinzu:

und führen Sie einen einfachen Test durch, um sicherzustellen, dass es funktioniert:

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

diese Arbeit. Jedoch:

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

dieser Fehler geben:

myd3.js: 1 Nicht abgerufener TypeError: Die Eigenschaft 'category10' von .__ kann nicht gelesen werden. nicht definiert

und ich versuche auch eine andere Funktion:

d3.scale.linear()

habe einige fehler:

myd3.js: 3 Nicht abgerufener TypeError: Die Eigenschaft 'linear' von .__ kann nicht gelesen werden. nicht definiert

wenn ich den Import in ändere 

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

dann funktioniert es für die Funktionen, aber die transition-Animation funktioniert nicht mehr.

Ich möchte die neueste Version verwenden. aber es scheint, als gäbe es Änderungen im Umfang, die mir nicht bewusst sind. 

Wie kann ich das beheben?

10
sooon

In D3 v4.x ist kein d3.scale.category mehr vorhanden. 

Entsprechend dem changelog sind hier die Änderungen:

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

Dies sind Farbschemata, die ...

... sind für die Arbeit mit d3.scaleOrdinal konzipiert. 

Anstelle von d3.scale.category10() müssen Sie also Folgendes verwenden:

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

Hier ist die Dokumentation für die Kategorie Skalen: https://github.com/d3/d3-scale#schemeCategory10

PS: Sie müssen die Domäne nicht für eine Ordinalwaage wie diese festlegen. Überprüfen Sie diese Demo:

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

In d3v4 müssen Sie d3.schemeCatgory verwenden: 

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

wenn jemand Winkel verwendet 2 

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

das ist der richtige Weg.

0
sajabhoj