Question

我的整个JavaScript代码如下所示。现在，图表行上的点击事件有效。但是，如何在此时从水平轴和垂直轴获取值？

onClick事件附加到Draw（）函数中的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，但我很确定，如果你宣布你的函数“clickPath”带有一个参数给你事件你就能得到你想要的东西：

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

另外，我建议在alert-calls之前使用console-calls。警报正在破坏您的js代码，无法显示数组。

获取SVG / 3Djs图表中单击的点的值

1 个答案: