修复多个堆叠条形图上的重叠

Question

下面的小提琴显示了multichart上的2个堆积条形图，可以应用什么样式来定位它们，使它们不重叠？

https://jsfiddle.net/ramgp76m/

var testdata = [[{'x':0,'y':0.18308100617846632},{'x':1,'y':0.18308100617846632},{'x':2,'y':0.18308100617846632},{'x':3,'y':0.18308100617846632},{'x':4,'y':0.18308100617846632},{'x':5,'y':0.18308100617846632},{'x':6,'y':0.18308100617846632},{'x':7,'y':0.18308100617846632},{'x':8,'y':0.18308100617846632},{'x':9,'y':0.18308100617846632},{'x':10,'y':0.18308100617846632},{'x':11,'y':0.18308100617846632},{'x':12,'y':0.18308100617846632},{'x':13,'y':0.18308100617846632}],[{'x':0,'y':0.3848121729491284},{'x':1,'y':0.3848121729491284},{'x':2,'y':0.6064571483967448},{'x':3,'y':0.3848121729491284},{'x':4,'y':0.3848121729491284},{'x':5,'y':0.3848121729491284},{'x':6,'y':0.3848121729491284},{'x':7,'y':0.3848121729491284},{'x':8,'y':0.3848121729491284},{'x':9,'y':0.3848121729491284},{'x':10,'y':0.3848121729491284},{'x':11,'y':0.3848121729491284},{'x':12,'y':0.3848121729491284},{'x':13,'y':0.3848121729491284}],[{'x':0,'y':0.1399518819223031},{'x':1,'y':0.1399518819223031},{'x':2,'y':0.1399518819223031},{'x':3,'y':0.1399518819223031},{'x':4,'y':0.1399518819223031},{'x':5,'y':0.1399518819223031},{'x':6,'y':0.1399518819223031},{'x':7,'y':0.1399518819223031},{'x':8,'y':0.1399518819223031},{'x':9,'y':0.1399518819223031},{'x':10,'y':0.1399518819223031},{'x':11,'y':0.1399518819223031},{'x':12,'y':0.1399518819223031},{'x':13,'y':0.1399518819223031}],[{'x':0,'y':0.661327785950392},{'x':1,'y':0.661327785950392},{'x':2,'y':0.661327785950392},{'x':3,'y':0.661327785950392},{'x':4,'y':0.661327785950392},{'x':5,'y':0.661327785950392},{'x':6,'y':0.661327785950392},{'x':7,'y':0.661327785950392},{'x':8,'y':0.661327785950392},{'x':9,'y':0.661327785950392},{'x':10,'y':0.661327785950392},{'x':11,'y':0.661327785950392},{'x':12,'y':0.661327785950392},{'x':13,'y':0.661327785950392}],[{'x':0,'y':0.12912787561339684},{'x':1,'y':0.19822891999644937},{'x':2,'y':0.19524003452978822},{'x':3,'y':0.2022421270610378},{'x':4,'y':2.9546625202733403},{'x':5,'y':0.17245495458323432},{'x':6,'y':0.17518206801386724},{'x':7,'y':0.19136958873352614},{'x':8,'y':0.20233322594961195},{'x':9,'y':0.791354544787474},{'x':10,'y':1.8421373975341035},{'x':11,'y':0.50545378694344},{'x':12,'y':0.15839045811626706},{'x':13,'y':0.17249910157699552}]].map(function(data, i) { 
 
     return { 
 
      key: 'Stream' + i, 
 
      values: data 
 
     }; 
 
    }); 
 

 

 
    testdata[1].type = "bar"; 
 
    testdata[1].yAxis = 1; 
 
    testdata[2].type = "bar"; 
 
    testdata[2].yAxis = 1; 
 
    
 
    testdata[3].type = "bar"; 
 
    testdata[3].yAxis = 2; 
 
    testdata[4].type = "bar"; 
 
    testdata[4].yAxis = 2; 
 

 
    nv.addGraph(function() { 
 
     var chart = nv.models.multiChart() 
 
      .margin({top: 30, right: 60, bottom: 50, left: 70}) 
 
      .color(d3.scale.category10().range()); 
 

 
     chart.xAxis.tickFormat(d3.format(',f')); 
 
     chart.yAxis1.tickFormat(d3.format(',.1f')); 
 
     chart.yAxis2.tickFormat(d3.format(',.1f')); 
 
     chart.bars1.stacked(true); 
 
     chart.bars2.stacked(true); 
 
     chart.bars1.groupSpacing(0.5); 
 
     chart.bars2.groupSpacing(0.5); 
 

 
     d3.select('#chart1 svg') 
 
      .datum(testdata) 
 
      .transition().duration(500).call(chart); 
 

 
     return chart; 
 
    }); 
 

text { 
 
      font: 12px sans-serif; 
 
     } 
 
     svg { 
 
      display: block; 
 
     } 
 
     html, body, #chart1, svg { 
 
      margin: 0px; 
 
      padding: 0px; 
 
      height: 100%; 
 
      width: 100%; 
 
     }

<link href="https://nvd3-community.github.io/nvd3/build/nv.d3.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"></script> 
 
<script src="https://nvd3-community.github.io/nvd3/build/nv.d3.js"></script> 
 
<div id="chart1" > 
 
    <svg> </svg> 
 
</div>

Answer 1

这里就是我做你的代码不同。

改变nv.models.multiChart()到nv.models.multiBarChart()

更新chart包括：

.showControls(false) 
.stacked(true); 

替换图表属性为以下：

chart.xAxis.tickFormat(d3.format(',f')); 
chart.yAxis.tickFormat(d3.format(',.1f')); 

//chart.xAxis.tickFormat(d3.format(',f')); 
//chart.yAxis.tickFormat(d3.format(',.1f')); 
//chart.yAxis2.tickFormat(d3.format(',.1f')); 
//chart.bars1.stacked(true); 
//chart.bars2.stacked(true); 
//chart.bars1.groupSpacing(0.5); 
//chart.bars2.groupSpacing(0.5); 

你可以找到你的代码的工作版本here

希望它有帮助。