如何創建圖例d3？

我從互聯網上看到這個例子：它工作正常，只是它只創建兩個矩形。我也不明白爲什麼這些矩形是創建的，因爲我期望只有一個。我創造了這個似乎不起作用的小提琴。 https://jsfiddle.net/q4py7wxg/。請幫忙。如何創建圖例d3？

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; });

來源

2017-01-31 Mazolo

你想知道爲什麼你的代碼...

創建只有兩個rects。

就是這個原因：在D3中，如果不設置域，默認域是：

[0, 1]

這就是爲什麼你看到的只有兩個矩形。讓我們來看看它在這個片段中，其中color.domain().slice().reverse()是你傳遞你的代碼中的數據：

//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>

正如你所看到的，您的數據只有兩個元素的數組。

解決方案：第一，改變你的域名：

.domain(d3.range(4))

這是相同的：

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

並相應地改變你的數據：

.data(d3.range(4))

PS：DO不改變你的數據而不改變你的域名，這將推斷e顏色，即比例尺將返回不在範圍內的顏色。

PS2：您正在使用錯誤的任務比例。它工作得很好，但對於任何經驗豐富的d3編碼器來說，這是一個奇怪的代碼。考慮使用具有離散範圍的刻度，如scaleQuantize,scaleQuantile或scaleThreshold。

這是小提琴：https://jsfiddle.net/9oxu4xyh/

來源

2017-01-31 10:28:55

你正在使用D3的版本錯誤，請嘗試d3.scaleLinear().代替d3.scale.linear()

來源

2017-01-31 09:29:16 slou

非常感謝。我已經糾正了，但如何給我的數據提交4個rects。 – Mazolo

如何創建圖例d3？

回答

相關問題