Wie legende d3 zu erstellen?

Question

Ich nahm dieses Beispiel aus dem Internet: Es funktioniert gut, außer dass es nur zwei rectures erstellt. Ich verstehe auch nicht, warum diese Rechtecke erstellt werden, da ich nur einen erwarten würde. Ich habe diese Geige erschaffen, die anscheinend nicht funktioniert. https://jsfiddle.net/q4py7wxg/. Bitte helfen Sie.

var color = d3.scale.linear() 
      .range(["rgb(213,222,217)", "rgb(69,173,168)", "rgb(84,36,55)", "rgb(217,91,67)"]); 

     var legendText = ["0 - 1000", "1000 - 2000", "2000 - 3000", "3000 - 5000"]; 
     var legend = d3.select("body").append("svg") 
      .attr("class", "legend") 
      .attr("width", 140) 
      .attr("height", 200) 
      .selectAll("g") 
      .data(color.domain().slice().reverse()) 
      .enter() 
      .append("g") 
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

     legend.append("rect") 
       .attr("width", 18) 
       .attr("height", 18) 
       .style("fill", color); 

     legend.append("text") 
       .data(legendText) 
       .attr("x", 24) 
       .attr("y", 9) 
       .attr("dy", ".35em") 
       .text(function(d) { return d; }); 

Answer 1

Sie fragen sich, warum Ihr Code ...

nur zwei Rects Erstellt.

Dies ist der Grund: in D3, wenn Sie die Standard-Domäne ist nicht die Domäne festgelegt,:

[0, 1] 

Und das ist, warum Sie nur zwei Rechtecke zu sehen sind. Sagen wir es in diesem Code-Schnipsel sehen, wo color.domain().slice().reverse() die Daten, die Sie in Ihrem Code vorbei sind:

//look Ma, no domain! 
 
var color = d3.scaleLinear(); 
 

 
console.log(color.domain().slice().reverse());

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

Wie Sie sehen können, Ihre Daten ist ein Array mit nur zwei Elementen.

Lösung:

.domain(d3.range(4)) 

, die die gleiche ist von:: Erstens, Ihre Domäne ändern

.domain([0,1,2,3]) 

Und die Daten entsprechend ändern:

.data(d3.range(4)) 

PS: do Ändern Sie Ihre Daten nicht, ohne Ihre Domain zu ändern, dies wird extrapoliert Die Farben, dh die Skala, werden Farben zurückgeben, die nicht im Bereich liegen.

PS2: Sie verwenden die falsche Skala für die Aufgabe. Es funktioniert (irgendwie), aber es ist ein merkwürdiger Code für jeden erfahrenen d3-Programmierer. Verwenden Sie Skalen mit diskreten Bereichen wie scaleQuantize, scaleQuantile oder scaleThreshold. Hier

ist die Geige: https://jsfiddle.net/9oxu4xyh/

Answer 2

Ihr die falsche Version von D3 verwenden, versuchen d3.scaleLinear(). statt d3.scale.linear()