D3.js鼠標懸停事件不在條形圖中工作

Question

我開發了d3.js系列條形圖，圖表正確顯示，但問題是我必須在鼠標懸停事件上顯示工具提示。但在我的情況下mouseover事件或事實上任何事件都不起作用。 整個條形圖的代碼如下：

 var localfinaldata = []; 
    var seriesData = ""; 
    var legendseperator = []; 

    for (var i = 0; i < data.length; i++) { 
     if (data[i].jobfamilydesc.length > 15) { 
      data[i].jobfamilydesc = data[i].jobfamilydesc.substring(0, 15); 
     } 

    } 
    var KeyGroup = []; 
    for (var i = 0; i < data.length; i++) { 
     KeyGroup.push(data[i].jobfamilydesc); 
    } 
    // KeyGroup = $.unique(KeyGroup); 
    KeyGroup = KeyGroup.filter(function (itm, i, KeyGroup) { 
     return i == KeyGroup.indexOf(itm); 
    }); 
    var outerData = []; 
    for (var j = 0; j < KeyGroup.length; j++) { 

     var innerData = []; 
     var items = {}; 
     items["key"] = KeyGroup[j]; 
     for (var i = 0; i < data.length; i++) { 


      if (data[i].jobfamilydesc == KeyGroup[j]) { 
       var item = {} 
       item["genderkey"] = data[i].genderkey; 
       item["HeadCount"] = data[i].HeadCount; 
       innerData.push(item); 
      } 

     } 
     items["details"] = innerData; 
     outerData.push(items) 
    } 
    for (var i = 0; i < outerData.length; i++) { 
     for (var j = 0; j < outerData[i].details.length; j++) { 

      legendseperator.push(outerData[i].details[j].genderkey); 
     } 
    } 
    legendseperator = $.unique(legendseperator); 
    for (var i = 0; i < outerData.length; i++) { 
     var itemupdated = {}; 
     var localdata = []; 
     for (var j = 0; j < outerData[i].details.length; j++) { 
      var item = {}; 
      item["genderkey"] = outerData[i].details[j].genderkey; 
      item["count"] = outerData[i].details[j].HeadCount; 
      localdata.push(item); 

     } 

     var flag = 0; 
     for (var k = 0; k < legendseperator.length; k++) { 
      for (var l = 0; l < localdata.length; l++) { 
       if (legendseperator[k] == localdata[l].genderkey) { 
        flag = 1; 
        break; 
       } 
       else { 
        flag = 0; 
       } 

      } 
      if (flag == 0) { 
       var item = {}; 
       item["genderkey"] = legendseperator[k]; 
       item["count"] = 0; 
       localdata.push(item); 
      } 
     } 






     // Call Sort By Name 
     localdata.sort(SortByName); 
     itemupdated["data"] = localdata; 
     itemupdated["names"] = outerData[i].key; 
     localfinaldata.push(itemupdated); 
    } 
var margins = { 
     top: 3, 
     left: 10, 
     right: 5, 
     bottom: 90 
    }, 
legendPanel = { 
    width: 190 
}; 
    var w = $('#jobDescriptionChart').width(); 
    var h = $('#jobDescriptionChart').height(); 
    var margin = { top: 10, right: 20, bottom: 30, left: 40 }, 
    width = w - margins.left - margins.right - legendPanel.width, 
    height = 225- margins.top - margins.bottom; 
    var padding = { top: 40, right: 40, bottom: 40, left: 40 }; 
    var x0 = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .1); 

//tooltip function 
var tip = d3.tip() 
    .attr('class', 'd3-tip') 
    .offset([-10, 0]) 
    .html(function (d) { 
     return "<strong>Frequency:</strong> <span style='color:red'>hju</span>"; 
    }) 


var x1 = d3.scale.ordinal(); 

    var y = d3.scale.linear() 
     .range([height, 0]); 

    var color = d3.scale.ordinal() 
     .range(["#b91d47", "#e3a21a", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

    var xAxis = d3.svg.axis() 
     .scale(x0) 
     .orient("bottom"); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left") 
     .tickFormat(d3.format(".2s")); 
    $('#jobDescriptionChart').html(""); 
    var svg = d3.select("#jobDescriptionChart").append("svg") 
     .attr("width", width + margins.left + margins.right + legendPanel.width) 
     .attr("height", height + margins.top + margins.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    svg.call(tip); 

    var maxCount = 0; 
    for (var j = 0; j < localfinaldata.length; j++) { 
     for (var i = 0; i < localfinaldata[j].data.length; i++) { 
      if (localfinaldata[j].data[i].count > maxCount) { 
       maxCount = localfinaldata[j].data[i].count; 
      } 
     } 
    } 

    x0.domain(localfinaldata.map(function (d) { return d.names; })); 
    x1.domain(legendseperator).rangeRoundBands([0, x0.rangeBand()]); 
    y.domain([0, maxCount]); 
    svg.append('g') // Container for the axis 
      .attr({ 
       class: 'yaxis', 

       height: height, 

      }) 

     .call(yAxis); 
    svg.append("g") 
     .attr("class", "axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
    .selectAll("text") 
          .attr("x", ".0em") 
          .attr("y", "0em") 
    .style("text-anchor", "end") 
          .attr("font-family", "Arial") 
          .attr("font-size", "13px") 
          .attr("transform", "rotate(-50)"); 
    var state = svg.selectAll(".name") 
     .data(localfinaldata) 
    .enter().append("g") 
     .attr("class", "g") 
     .attr("transform", function (d) { 
      return "translate(" + x0(d.names) + ",0)"; 
     }); 

    $('.axis path').css("fill", "none"); 
    var rect = state.selectAll("rect") 
      .data(function (d) { return d.data; }) 
     .enter().append("rect") 

        .attr({ 
         y: height, 
         height: 0 
        }) 

      .transition() 
        .duration(1500) 
      .attr("width", x1.rangeBand()) 

      .attr("x", function (d) { 
       return x1(d.genderkey); 
      }) 
      .attr("y", function (d) { 
       return y(d.count); 
      }) 
      .attr("height", function (d) { 
       return height - y(d.count); 
      }) 

      .style("fill", function (d) { return color(d.genderkey); }) 
      .on('mouseover', tip.show) 
      .on('mouseout', tip.hide); 






    legendseperator.forEach(function (s, i) { 
     svg.append('rect') 
      .attr('fill', color(legendseperator[i])) 
      .attr('width', 20) 
      .attr('height', 20) 
      .attr('x', width + margins.left + 30) 
      .attr('y', i * 24 + 115);//130 
     svg.append('text') 
      .attr('fill', 'black') 
      .attr("font-size", "11") 
      .attr('x', width + margins.left + 50) 
      .attr('y', i * 24 + 132)//147 
      .attr("font-family", "Arial") 
      .text(s); 

    }); 

Answer 1

你的方法鏈接是不正確。您正試圖呼籲從.transition返回的過渡.on，當你要調用它的選擇：

var rect = state.selectAll("rect") 
    .data(function(d) { 
     return d.data; 
    }) 
    .enter() 
    .append("rect") 
    .attr({ 
     y: height, 
     height: 0 
    }) 
    .on('mouseover', tip.show) 
    .on('mouseout', tip.hide) //<-- call on selection before .transition 
    .transition() 
    .duration(1500) 
    .attr("width", x1.rangeBand()) 
    .attr("x", function(d) { 
     return x1(d.genderkey); 
    }) 
    .attr("y", function(d) { 
     return y(d.count); 
    }) 
    .attr("height", function(d) { 
     return height - y(d.count); 
    }) 
    .style("fill", function(d) { 
     return color(d.genderkey); 
    });