条形图外部边界和鼠标悬停事件问题

Question

1. 这是我的dimple.js代码，它生成的条形图超出界限并触及Y轴。

2. 鼠标悬停事件不会更改条形图的颜色。 下面是图片

   var myChart2 = new dimple.chart(svg,data);
       myChart2.setBounds(750,50,550,250);    
       var x = myChart2.addTimeAxis( "x", "date", "%m/%d/%Y", "%d-%b");
       x.floatingBarWidth = 21;
       var y2= myChart2.addMeasureAxis("y","callperorder");
       var y1= myChart2.addMeasureAxis("y","calls");
   
   
       var bars = myChart2.addSeries("or", dimple.plot.bar,[x,y2]);
   
       var lines= myChart2.addSeries("cl", dimple.plot.line,[x,y1]);
   
   
       lines.lineMarkers= true;       
   
       myChart2.addLegend(750, 20, 300, 20, "right");
   
       myChart2.assignColor("cl","rgb(99,39,29)");
       myChart2.assignColor("or","rgb(99,89,219)");
   
   
       myChart2.draw();
   
      \\MOUSEOVER EVENT       
       bars.addEventHandler("mouseover", function( {d3.select(this).style("fill","green")});        
   

Answer 1

如果要使用dimple方法，则需要在调用draw之前添加事件处理程序。或者，您可以在绘制后使用d3方法。

bars.shapes.on("mouseover", function () {...});

NB。您的活动声明中也有拼写错误，它在function (之后错过了结束括号。

为避免重叠图表边缘，您需要手动设置x边界：

x.overrideMin = d3.time.format("%m/%d/%Y").parse("12/31/2014");
x.overrideMax = d3.time.format("%m/%d/%Y").parse("01/11/2015");

当然要使用你想要的任何值;