下面是D3和Dimple.js代码，该图表显示所有对象。但是，讨价还价没有改变，而且显示的很薄。
当我更改属性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>
最佳答案
barGap属性仅适用于类别轴，对于时间轴，您可以使用axis.floatingBarWidth扩展条形。
时间轴没有恒定的间隙，因此将尺寸设置为固定的像素宽度。