plotly.js: how to access data other than x, y on click event
<p>below is the code in the <a href="https://plot.ly/javascript/click-events/" rel="nofollow">document of plotly.js dealing with click events</a></p>

<pre><code>var myPlot = document.getElementById('myDiv'),
    d3 = Plotly.d3,
    N = 16,
    x = d3.range(N),
    y = d3.range(N).map( d3.random.normal() ),
    data = [ { x:x, y:y, type:'scatter',
            mode:'markers', marker:{size:16} } ],
    layout = {
        hovermode:'closest',
        title:'Click on Points'
     };

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_click', function(data){
    var pts = '';
    for(var i=0; i &lt; data.points.length; i++){
        pts = 'x = '+data.points[i].x +'\ny = '+
            data.points[i].y.toPrecision(4) + '\n\n';
    }
    alert('Closest point clicked:\n\n'+pts);
});
</code></pre>

<p>via <code>plotly_click</code> event, I can access the data through the point values <code>x</code> and <code>y</code>. but I want to get the other fields than these. Assume I change the above data in a suitable way for <code>plotly.js</code> as</p>

<pre><code>var N = 5,
    x = d3.range(N),
    y = d3.range(N).map( d3.random.normal() ),
    text = d3.range(N).map( function() {return "hello";} ),
    data = [ {x: x, y: y, text: text, type:"scatter", mode: "markers"} ];
</code></pre>

<p>in this case, is there a way to access <code>text</code> attribute in <code>plotly_click</code> event? basically I want to open new tab with url containing additional information (like <code>text</code> field).</p>

<p>Additionally, I wander how to make data with hidden fields (other than <code>text</code>) so that I use <code>text</code> for tooltips when hover, and other field for the click event. Thanks in advance.</p>