d3.js創建網格樣式的條形圖

我試圖動態地建立一些「錢條形圖」就像這個例子 http://imgur.com/5ij91Pm d3.js創建網格樣式的條形圖

我的算法，以確定有多少賬單需要爲每個類別將產生。小美元符號已經在svg中創建。所以我所要做的就是將它們添加到時尚網格中。然後，我必須能夠根據數據集中存在的不同類別的數量創建多個條形圖。

真的在這一點上，它只是創造了我卡住的「網格」格式的美元符號。任何幫助都會很棒。

任何提示，感激！

來源

2015-11-20 ProgrammedChem

大，聽起來像你取得良好的進展。 –

關於如何在「網格」周圍創建條形圖，您有任何提示嗎？當有美元符號時，它們按照從左上到下的順序填充，然後返回到第二排的頂部。 – ProgrammedChem

那麼你可以使用'd3.range（）'生成一個項目到一個數字，然後用它作爲數據添加圖像。 –

下面是一個簡單的例子。我已經評論過，讓我知道你不瞭解的內容。我欺騙了一下，用rect要素描繪的票據：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <script> 
 
    \t \t var data = [{ 
 
    \t \t "name": "Web", "value": 376.19 
 
    \t \t },{ 
 
    \t \t "name": "Phone", "value": 550.55 
 
    \t \t },{ 
 
    \t \t "name": "Store", "value": 125.25 
 
    \t \t }] 
 
    \t \t 
 
    \t \t // some constants 
 
    \t \t var billWorth = 20, // bill value 
 
    \t \t  billWidth = 50, 
 
    \t \t  billHeight = 26, 
 
    \t \t  numRows = 4 
 
    \t \t  sectionSpace = 150; // space allocated for each group of data 
 
    \t \t 
 
    \t \t var svg = d3.select("body") 
 
    \t \t .append("svg") 
 
    \t \t .attr("width", 600) 
 
    \t \t .attr("height", 600) 
 
    \t \t .append("g"); 
 
    \t \t 
 
    \t \t // a group for data point 
 
    \t \t var g = svg.selectAll("finance") 
 
    \t \t .data(data, function(d){ 
 
    \t \t  return d.name; 
 
    \t \t }) 
 
    \t \t .enter() 
 
    \t \t .append("g") 
 
    \t \t .attr("class", "finance"); 
 
    \t \t 
 
    \t \t // the name of each group 
 
    \t \t g.append("text") 
 
    \t \t .text(function(d){ 
 
    \t \t  return d.name; 
 
    \t \t }) 
 
    \t \t .style("fill","black") 
 
    \t \t .attr("transform",function(d,i){ 
 
    \t \t  return "translate(10,"+ ((i * sectionSpace) + (sectionSpace/2)) +")" 
 
    \t \t }) 
 
    \t \t 
 
     // a group for collection of bills 
 
     // this is a subselection of the finance group 
 
    \t \t var bill = g.append("g") 
 
    \t \t .attr("transform",function(d,i){ 
 
    \t \t  return "translate(70,"+ ((i * sectionSpace) + 10) +")" 
 
    \t \t }) 
 
    \t \t .selectAll("bill") 
 
    \t \t // our data is the range of the number of bills 
 
    \t \t .data(function(d){ 
 
    \t \t  // store this in the data so I can use it later 
 
    \t \t  d.numBills = Math.ceil(d.value/billWorth); 
 
    \t \t  return d3.range(d.numBills); 
 
    \t \t }) 
 
    \t \t .enter() 
 
      // a group for each bill 
 
    \t \t .append("g") 
 
    \t \t .attr("class", "bill") 
 
    \t \t // position each bill 
 
    \t \t .attr("transform",function(d,i,j){ 
 
    \t \t  var trans = ""; 
 
    \t \t  var x = Math.floor(d/numRows) * (billWidth + 5); // this is the column 
 
    \t \t  var y = ((d % numRows) * (billHeight + 5)); // this is the row 
 
    \t \t  trans += "translate(" + x + "," + y + ")"; 
 
    \t \t  return trans; 
 
    \t \t }) 
 
    \t \t 
 
    \t \t // draw the bill 
 
    \t \t bill 
 
    \t \t .append("rect") 
 
    \t \t // on the last bill, shorten it to represent a partial value 
 
    \t \t .attr("width", function(d,i,j){ 
 
    \t \t  if (d === data[j].numBills - 1){ 
 
    \t \t  return billWidth * ((data[j].value % billWorth)/billWorth); 
 
    \t \t  } else { 
 
    \t \t  return billWidth; 
 
    \t \t  } 
 
    \t \t }) 
 
    \t \t .attr("height", billHeight) 
 
    \t \t .style("stroke","green") 
 
    \t \t .style("fill","green"); 
 

 
    \t \t bill 
 
    \t \t .append("text") 
 
    \t \t .text("$") 
 
    \t \t .style("fill","white") 
 
    \t \t .attr("x", billWidth/2.3) 
 
    \t \t .attr("y", billHeight/1.5); 
 
\t \t \t 
 
\t </script> 
 
    </body> 
 

 
</html>

來源

2015-11-20 22:12:37 Mark

哦，上帝@馬克，非常感謝這個例子！你的代碼的一般結構是我想到的，但看到它確實清楚。我將使用您的一般想法爲我的代碼。再次感謝x100。這是真正的讚賞！ – ProgrammedChem

d3.js創建網格樣式的條形圖

回答

相關問題