分層條形圖與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

回答

相關問題