D3 이벤트 리스너를 올바르게 작성하는 방법은 무엇입니까?

Question

많은 육각형을 그리는 코드가 있지만 마우스를 가져 가면 흰색으로 표시하고 다른 것들을해야합니다. 왜 이벤트 리스너가 작동하지 않고 무엇을해야합니까? http://jsfiddle.net/rewBr/

var elementTags = ["Google", 4, "Wikipedia", "Yahoo!", "Cindy"]; 
var _s32 = (Math.sqrt(3)/2); 
var A = 75; 

var svgContainer = d3.select("body") //create container 
    .append("svg") 
    .attr("width", 1000) 
    .attr("height", 1000); 
var xDiff = [0, 200, 400, 600, 800, 1000, 1200, 1400]; 
var yDiff = [200, 200, 200, 200, 200, 200, 200]; 

for (index = 0; index < elementTags.length; index++) { var pointData = [ [A+xDiff[index], 0+yDiff[index]], [A/2+xDiff[index], (A*_s32)+yDiff[index]], [-A/2+xDiff[index], (A*_s32)+yDiff[index]], [-A+xDiff[index], 0+yDiff[index]], [-A/2+xDiff[index], -(A*_s32)+yDiff[index]], [A/2+xDiff[index], -(A*_s32)+yDiff[index]], [A+xDiff[index], 0+yDiff[index]]];

var hexMouseOver = function(){ 
     console.log(this); 
     this.style("fill", "white"); 
    } 

var enterElements = svgContainer.selectAll("path.area") //draw element 
    .data([pointData]).enter().append("path") 
    .style("fill", "#1D85E0") 
    .style("stroke", "black") 
    .attr("d", d3.svg.line()) 
    .style("shape-rendering", "auto") 
    .on("mouseover", hexMouseOver); 

} var addText = svgContainer.selectAll("text").data(elementTags).enter().append("text");

var textElements = addText 
      .attr("x", function(d, i){ 
       return xDiff[i];}) 
      .attr("y", function(d, i){ 
       return yDiff[i];}) 
      .attr("font-family", "Arial Black") 
      .attr("font-size", "20px") 
      .attr("fill", "1A2E40") 
      //.attr("font-variant", "small-caps") 
      .style("text-anchor", "middle") 
      .text(function(d, i){return d;}); 

Answer 1

당신은 D3 첫 번째로 '이'요소를 선택해야합니다

.on("mouseover", function(){ 
    console.log(this); 
    console.log(d3.select(this)); 
    d3.select(this).style("fill", "white");}) 

을

업데이트 됨 : http://jsfiddle.net/rewBr/3/