Dimple.js barGap 函数不工作

Question

下面是一段D3和Dimple.js代码，图表显示所有对象。然而，bargaps 并没有改变，它们显示得非常薄。

当我更改属性 barGap 时，它根本不会影响图表。我在 底部插入图像。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<style>


path.dimple-series-2.dimple-line.dimple-all{

background-color:"green";

}


path.dimple-series-0.dimple-line.dimple-all{

background-color:"red";

}


</style>

<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
<script type="text/javascript">

function draw (data){


var margin = 75,
width = 1400-margin,
height= 500-margin;



var svg = d3.select("body")
.append("svg")
.attr("width", width+margin)
.attr("height", height+margin)
.append("g")
.attr("class", "chart");

 //Appending Title
svg.append("text")
.attr("x",650)
.attr("y",20)
.style("fill","black")
.style("font-family","serif")
.style("font-size","20px")
.text("Bars and Lines!");



var myChart = new dimple.chart(svg,data);
var x = myChart.addTimeAxis( "x", "date", "%m/%d/%Y", "%d");
var y2= myChart.addMeasureAxis("y","orders");
var y1= myChart.addMeasureAxis("y","calls");

//Adding Bars     
var bars = myChart.addSeries("or", dimple.plot.bar,[x,y2]);

var lines= myChart.addSeries("cl", dimple.plot.line,[x,y1]);

//Adding Markers to lines    
lines.lineMarkers= true;    

//BarGAP Property
bars.barGap = 0.6;




//myChart.addLegend(700, 20, 500, 20, "right");

myChart.assignColor("cl","rgb(99,99,99)");
myChart.assignColor("or","rgb(221,28,119)");


myChart.draw();


};



</script>


</head>

<body>
<script type="text/javascript">

d3.csv("call_order.csv",draw);

</script>

</body>    



</html>

Answer 1

barGap 属性仅适用于类别轴，对于时间轴，您可以使用 axis.floatingBarWidth.

加宽条形

时间轴没有恒定的间隙，因此大小被设置为固定的像素宽度。

Dimple.js barGap 函数不工作

Dimple.js barGap function not working

javascript

charts

bar-chart

d3.js

dimple.js