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创建网格样式的条形图

回答

相关问题