从单击事件访问D3中的数据

Question

我有个svg里面有个圆圈。圆圈是用"myData“中的数据对象创建的。圆圈有一个单击事件，但是当我试图将附加到这个圆圈的数据console.log()时，我得到以下错误消息:未定义未定义的ReferenceError: d。

任何建议都非常欢迎。

下面的代码可以在这里进行测试：https://jsfiddle.net/zsv21byf/

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg id="cv">
</svg>




const myData = [
{id:"Zoox",type:"Tier1",tags:"AD_Driverless",technology:"",market:"Robotaxi",valuation:"",description:"Zoox is an AI robotics company that provides mobility as-a-service and self-driving car services.",country:"US",region:"North America",image:"https://res-4.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco/kpc7mmk886nbbipbeqau"}
]

var svg = d3.select("#cv")
 .attr("height",300)
 .attr("width", 300)
 .style("border", "1px solid red")

        
    const node = svg.append("g")
        .attr("stroke", "red")
        .attr("stroke-width", 5)
        .selectAll("circle")
        .data(myData)
        .join("circle")
        .style("fill", "white")
        .attr("r", 20)
        .attr("cx", 100)
        .attr("cy", 100)
        .on("click", function() { 
            console.log(d.id)
        });



#cv{
    width: 100%;
  }

Answer 1

我想通了。我需要通过d3.select(this)访问数据。

在我的例子中，这就是需要在console.log中输入的内容：

console.log( d3.select(this).data()[0] )