보조개 js 이벤트 처리기 차트 데이터

Question

막대 차트가 dimple js 인 경우 막대를 클릭 할 때 어떤 일이 발생하지만 클릭 한 특정 막대의 데이터를 원하고 클릭하면 어떻게 바뀔 수 있는지를 설정합니다.

data = [ 
     { "Value" : 10, "Year" : 2009}, 
     { "Value" : 11, "Year" : 2011}, 
     { "Value" : 12, "Year" : 2007}, 
     { "Value" : 13, "Year" : 2006}, 
     { "Value" : 14, "Year" : 2014}, 
     { "Value" : 15, "Year" : 2012}, 
     { "Value" : 16, "Year" : 2011}, 
     { "Value" : 17, "Year" : 2013}, 
     { "Value" : 18, "Year" : 2015} 
    ]; 
    var svg = dimple.newSvg("#chartContainer", 600, 400); 
    var chart = new dimple.chart(svg, data); 
    var x = chart.addCategoryAxis("x", "Year"); 
    x.addOrderRule("Year"); 
    var y = chart.addMeasureAxis("y", "Value"); 
    chart.addColorAxis("Value", ["blue", "purple", "red"]); 
    var lines = chart.addSeries(null, dimple.plot.bar); 
    lines.lineWeight = 4; 
    lines.lineMarkers = true; 
    chart.ease = "bounce"; 
    chart.staggerDraw = true; 
    chart.draw(1000); 



d3.selectAll("rect").on("click", function (e) { 
     ///I want to know which bar clicked here 
    }); 

Answer 1

당신은 이벤트 객체 e를 사용할 수 있습니다
여기 여기 jsfiddle
것을 내 샘플 JS 코드입니다. 나는 다른 값을 찾을 수있는 e을 위로했다. x 축과 y 축에서 각각 e.cx과 e.cy으로 값을 얻었습니다.

d3.selectAll("rect").on("click", function (e) { 
     ////Which chart clicked 
    console.log(e); 
    $('p').html('Selected: x-axis -'+e.cx+', y-axis -'+e.cy); 

    }); 

는 fiddle

를 참조하십시오