javascript - 条形图超出范围和鼠标悬停事件问题

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 () {...});

注意。您的事件声明中还有一个拼写错误，它缺少 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");

当然可以使用您想要的任何值；