D3：通過鍵值在圖上着色「元素」

我沒有代碼顯示 - 我不知道從哪裏開始。這是我的問題。通常我會很長時間，我已經做了。然而 - 我在編碼方面是個小白，所以對我來說很難（有點）。D3：通過鍵值在圖上着色「元素」

我知道D3的工作原理，基本知識。我可以用類別或範圍創建幾個簡單的colorScales。我想要做的是以下。

我的圖表上的每個點或條或線都將取決於我的JSON文件中「Key」的「Value」的某個顏色。

例如「Supplier_name」：「FLYBE BRITISH EUROPEAN」將等於紫色例如「Supplier_name」：「EASYJET」將等於橙色

依此類推。

我是否創建了一個新的JSON數組，其中包含一個對象，其中列出了每個供應商的名稱以及添加的相關顏色，因爲它的值？喜歡的東西this

我不知道該怎麼做：（!!!!!

來源

2015-12-10 TheyDontHaveIT

只需添加一個屬性與所需的顏色值，你的數據，你的情況你的JSON文件，然後應用顏色的元素。就像你將適用於任何其他屬性。

下面是一個例子。

var margin  = { top: 50, right: 50, bottom: 50, left: 50}, 
 
    w    = 300 - margin.left - margin.right, 
 
    h    = 600 - margin.top - margin.bottom, 
 
    circleRadii = 15, 
 
    // add colors to your data 
 
    circleData = [{x: 10, y: 10, c: "yellow"}, {x: 50, y: 80, c: "green"}, {x: 90, y: 10, c: "red"}]; 
 

 
var svg = d3.select("body") 
 
.append("svg") 
 
.attr("width", w + margin.left + margin.right) 
 
.attr("height", h + margin.left + margin.right) 
 
.append("g") 
 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
var circles = svg.selectAll("circle") 
 
.data(circleData) 
 
.enter() 
 
.append("circle"); 
 

 
var circleAttr = circles 
 
.attr("cx", function (d) { return d.x; }) 
 
.attr("cy", function (d) { return d.y; }) 
 
.attr("r", circleRadii) 
 
// apply your color from the dataset 
 
.style("fill", function (d) { return d.c; });

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

來源

2015-12-10 21:04:16 DavidDomain

這有助於更好地理解它更好的兄弟！謝謝！ – TheyDontHaveIT

當然，沒問題。快樂的編碼。 – DavidDomain

我從外部資源中提取數據 - 就像數組中的1000條記錄（對象）一樣。每個對象都有一個供應商名稱和一個供應商值。有沒有一種方法可以將顏色（鍵）與其值=「我想要的顏色」添加到每個對象？像上面的例子將在2個單獨的記錄（對象）中。 – TheyDontHaveIT

D3：通過鍵值在圖上着色「元素」

回答

相關問題