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

Question

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

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

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");

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

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

Bar Chart outside bounds and mouseover event issue

javascript

d3.js

charts

mouseover

dimple.js