在d3.js中单击散点图中的圆圈时如何获取行ID

时间:2019-06-06 09:28:14

标签: javascript d3.js

我在d3.js中绘制了一个散点图。 现在,我想在单击散点图中的任何圆圈时获取行ID。

my graphdatanew = [
{'x':1,'y':2,'row_id':0},
{'x':12,'y':3,'row_id':1},
{'x':3,'y':20,'row_id':2}]

我的d3散点图代码-

const chart = d3.select('.chart')
      .attr('width', width + margins.left + margins.right)
      .attr('height', height + margins.top + margins.bottom)
      .append('g')
      .attr('transform','translate(' + margins.left + ',' + margins.top + ')');
      var yScale = d3.scaleLinear()
      .rangeRound([0,height])
      .domain([yscale2,yscale1]);
      var xScale = d3.scaleLinear()
      .rangeRound([0,width])
      .domain([xscale1,xscale2]);


    const dots = chart.selectAll('dot')
      .data(graphdatanew , null, 2)
      .enter().append('circle')
      .attr('r', 5)
      .attr('id', d => { return d["row_id"]}) =======>here i am returning id
      .attr('cx', d => {return xScale(d.x); })
      .attr('cy', d => {return yScale(d.y)})
      .on("click", function(d){
        console.log("row id is-", d["row_id"])
        clickDot(d)
      })

      .style('fill', (d) => {
         return 'black'
       });

我在stackoverflow上找到了一些解决方案

How can I get the id of a record in a d3 scatter plot?

How to make scatterplot highlight data on-click

但它对我不起作用。

我不明白,我做错了。

请帮助

0 个答案:

没有答案