Question

我正在尝试动态构建一些＆＃34;钱条形图＆＃34;就像在这个例子中 http://imgur.com/5ij91Pm

我有算法来确定每个类别需要生成多少账单。 svg中已经创建了小美元符号。所以我真的需要做的就是将它们添加到时尚网格中。然后，我必须能够根据数据集中存在的不同类别的数量创建多个条形图。

真的在这一点上，它只是在＆＃34;网格＆＃34;周围创造了美元符号。格式，我卡住了。任何帮助都会很棒。

任何提示都表示赞赏！

Answer 1

这是一个简单的例子。我已经评论过了，让我知道你不明白的是什么。我有点作弊并用rect元素绘制账单：

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

d3.js创建网格样式条形图

1 个答案: