分层条形图与d3.js

我想创建条形图里面的条形图，否则称为分层条形图。我的示例代码如下。分层条形图与d3.js

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    </head> 
<body> 
    <script> 
     var dataArray = [10, 20, 40, 60]; 
     var canvas = d3.select("body").append("svg").attr("width", 500).attr("height", 500); 

     var bars = canvas.selectAll("rect").data(dataArray).enter().append("rect").attr("width", function(d){ 
      return d * 10; 
     }).attr("height", 30).attr("y", function(d, i){ 
      return i * 35; 
     }).attr("fill", "blue").attr("fill-width", "green"); 

     canvas.append("text").text(function(d){ 
      return d; 
     }).attr; 



     var dataArray1 = [5, 10, 20, 30]; 

     var bars1 = canvas.selectAll("rect").data(dataArray1).enter().append("rect").attr("width", function(d){ 
      return d * 7; 
     }).attr("height", 20).attr("y", function(d, i){ 
      return (i*35) + 5; 
     }).attr("fill", "red").attr("fill-width", "black");; 

    </script> 
</body> 
</html>

在这里bars和bar1是在svg容器上绘制的条形图。我的问题是，当更长的酒吧是可见的，小酒吧不是可分离的。但我试图在较长的条内放置较小的条，使其看起来像下图。 enter image description here 。

但我无法这样做。评论更长的条形图代码显示我更小的酒吧。对此有何帮助？谢谢

来源

2014-04-02 sakthisundar

一种可能的解决方案，请参阅example at jsbin。

问题是阵列长度没有变化，所以enter()没有什么可追加的。第一个数组必须扩展才能创建新的元素。

var dataArray1 = [5, 10, 20, 30]; 
var offset = dataArray1.length; 
dataArray = dataArray.concat(dataArray1); 

var bars1 = canvas.selectAll("rect") 
// .data(dataArray1) 
    .data(dataArray) 
    .enter() 
    .append("rect") 
     .attr("width", function(d){ 
      return d * 7; 
     }) 
     .attr("height", 20) 
     .attr("y", function(d, i){ 
      return ((i - offset)*35) + 5; 
     }) 
     .attr("fill", "red"); 
     //.attr("fill-width", "black");

更新：具有较少的变化的另一种解决方案增加了class属性做基础，并添加条之间进行区分。请参阅example at jsbin。

var bars = canvas.selectAll("rect") 
    .data(dataArray) 
    .enter() 
    .append("rect") 
     .attr('class', 'base') 
     ... 

var dataArray1 = [5, 10, 20, 30]; 

var bars1 = canvas.selectAll("rect.addon") 
    .data(dataArray1) 
    .enter() 
    .append("rect") 
     .attr('class', 'addon') 
     ...

来源

2014-04-02 08:06:56

注意：我不知道'fill-width是什么，所以我评论了它。 –

只是一个小细节：两个图表的宽度乘数（值的实际表示）应该相同，以保持值可比。 – FernOfTheAndes

分层条形图与d3.js

回答

相关问题