獲取SVG/3Djs圖表中點擊點的值

Question

我的整個JavaScript代碼如下。現在圖表上的點擊事件就可以工作。但是，在這一點上我怎樣才能從橫軸和縱軸得到數值？

在Draw（）函數中，onClick事件附加到svg.append('path')。

謝謝。

var parseDate = d3.time.format('%d-%b-%y').parse; 
var svg, d3, x, y, valueline, xAxis, yAxis, width, height; 

function CreateSvg() 
{ 
    // Set the dimensions of the canvas/graph 
    var margin = {top: 30, right: 20, bottom: 30, left: 50}; 
    width = 600 - margin.left - margin.right; 
    height = 270 - margin.top - margin.bottom; 

    // Set the ranges 
    x = d3.time.scale().range([0, width]); 
    y = d3.scale.linear().range([height, 0]); 

    // Define the axes 
    xAxis = d3.svg.axis().scale(x) 
     .orient('bottom').ticks(5); 

    yAxis = d3.svg.axis().scale(y) 
     .orient('left').ticks(5); 

    // Define the line 
    valueline = d3.svg.line() 
     .x(function(d) { return x(d.date); }) 
     .y(function(d) { return y(d.close); }); 

    // Adds the svg canvas 
    svg = d3.select('body') 
     .append('svg') 
      .attr('width', width + margin.left + margin.right) 
      .attr('height', height + margin.top + margin.bottom) 
     .append('g') 
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') 
    ; 
} 

function GetData(data) 
{ 
    data.forEach(function(d) 
    { 
     d.date = parseDate(d.date); 
     d.close = +d.close; 
    }); 

    //Adds two random data. ""Getting started experimentation code." 
    data.reverse(); 
    data.push({date:parseDate('3-May-12'), close:Math.random() * 1200}); 
    data.push({date:parseDate('4-May-12'), close:Math.random() * 1200}); 
    data.reverse(); 
    return data; 
} 

function Draw() 
{ 
    d3.csv('data.csv', function(error, data) 
    { 
     svg.text(''); //Resets SVG. 

     data = GetData(data); 

     //Scale the range of the data 
     x.domain(d3.extent(data, function(d) { return d.date; })); 
     y.domain([0, d3.max(data, function(d) { return d.close; })]); 

     //Add the valueline path. 
     svg.append('path') 
      .attr('class', 'line') 
      .attr('d', valueline(data)) 
      .on('mouseover', onMouseOverPath) 
      //.on('mouseout', onMouseOut) 
      .on('click', clickPath) 
      ; 

     // Add the X Axis 
     svg.append('g')  
      .attr('class', 'x axis') 
      .attr('transform', 'translate(0,' + height + ')') 
      .call(xAxis); 
     // Add the Y Axis 
     svg.append('g')  
      .attr('class', 'y axis') 
      .call(yAxis); 
    }); 
} 

function clickPath(){alert('onclickPath');} 
function onMouseOverPath(){ 
    //alert('mouseOverPath'); 
    } 
function onMouseOutPath(){alert('mouseOutPath');} 
function click() {alert('onclick');} 
function onMouseOver(){alert('mouseOver');} 
function onMouseOut(){alert('mouseOut');} 

CreateSvg();  
Draw(); 
Draw(); 

Answer 1

我不知道3Djs，但我敢肯定，如果你有一個參數中聲明你的功能「點擊路徑」給你時你能得到你想要的東西：

function clickPath(e){ 
    console.log('onclickPath', e, e.target); 
} 

另外我建議在警報呼叫之前使用控制檯呼叫。警報正在打破你的js代碼，並且不能顯示數組。