无法在 onclick 事件中使用 d 函数读取当前数据集元素

Question

当我创建的圆圈上发生单击事件时，我正在尝试控制台记录作为对象项（在本例中为圆圈）的 ID 给出的随机数。我尝试通过定义一个 onClick 函数和在 FruitBowl.js 模块中调用它。使用以下代码时出现未定义的错误。

import { select,range  } from 'd3';
    import {fruitBowl} from './fruitBowl';
    const svg = select('svg');
    
    const makeFruit = type => ({
      type,
      id: Math.random()
    });
    let fruits = range(5)
        .map(() => makeFruit('apple'));
    let selectedFruit= null;
    const onClick= d => {
        selectedFruit= d.id;
      render();
    };
    
    const render = () => {
        fruitBowl(svg,{
                    fruits,
              height:+svg.attr('height'),
                    onClick
      });
    };
    
    render();
    
    setTimeout(() => {
        fruits.pop();
        render();
    },1000);
    
    setTimeout(() => {
        fruits[2].type = 'lemon';
        render();
    },2000);
    
    setTimeout(() => {
        fruits = fruits.filter((d,i)=> i !==1); //to select all elements except element 2
        render();
    },3000);

下面是被导出到 index.js 文件的fruitBowl.js 模块。

import { scaleOrdinal } from 'd3';
const colorScale = scaleOrdinal()
    .domain(['apple','lemon'])
    .range(['red','yellow']);
const radiusScale = scaleOrdinal()
    .domain(['apple','lemon'])
    .range([50,30]);

// function that does multiple operations like .enter and .exit

    export const fruitBowl =  (selection,props) =>{
      const {fruits,height,onClick} = props;
        const circles =selection.selectAll('circle')
         .data(fruits,d=>d.id);
      
      const xPosition = (d,i) => i*120+80;
    
      circles
        .enter().append('circle')
          .attr('cx',xPosition)
          .attr('cy',height/2)
          .attr('r',0)
        .merge(circles)     //merge operation of enter and updates
          .attr('fill',d => colorScale(d.type))
            .on("click",d => {
                console.log(d.id);
      })
        .transition().duration(1000)
            .attr('cx',xPosition)
          .attr('r',d =>radiusScale(d.type));
    
    
    
    //code to remove an element from the data
    circles.exit()
      .transition().duration(1000)
        .attr('r',0) 
      .remove();
      //.attr('fill','black');   
    };

Answer 1

这肯定是你问题的一部分：

let selectedFruit= null;
const onClick = d => {
    /// selectedFruit= id; You need to reference the obj d
  selectedFruit= d.id; 
  render();
};