Question

JS和绘制圆圈，我将它拖动到某些坐标，现在我需要检索所选项目的x-cordinate，y坐标和颜色（我随机分配），我能够获得x-cord， y-cord，radius但颜色显示为null。我在这里指定颜色和坐标：

svg.selectAll("circle")
   .data(circles)
   .enter().append("circle")
   .attr("cx", function (d) {
       return d.x;
   })
   .attr("cy", function (d) {
       return d.y;
   })
   .attr("r", radius)
   .style("fill", function (d, i) {
       return color(i);
   })
   .call(d3.drag()
   .on("start", dragstarted)
   .on("drag", dragged)
   .on("end", dragended));

这里我试图检索所选项目的坐标和颜色

   function dragended(d) {
      d3.select(this).classed("active", false);

      console.log('dragged  ' + flagForCircle + ' xCord ' + d3.select(this).attr('cx')+' ycord ' + d3.select(this).attr('cy') +' color ' + d3.select(this).attr('fill'));

      d3.select(this).on('mousedown.drag', null);


      }


   }

Answer 1

您正在使用style设置填充：

.style("fill", function (d, i) {
    return color(i);
})

因此，您必须在getter中使用style：

d3.select(this).style('fill')

Answer 2

阅读本文的任何人的注意事项。我正在使用d3 5.7版。在我的情况下，如果满足某些条件，我需要保持填充量恒定，为此，我执行了以下操作。

.style("fill", function (d, index, element) {
  if(criteria) {
     return element[index].style.fill; // Get fill of current item
  } else {
    return "black"
  }
})

如何使用d3获取当前所选对象的颜色

2 个答案: