javascript - D3 v4 散点图数据点未在缩放时更新

Question

我正在使用d3 v4制作散点图，并希望应用缩放，以便我可以在数据点彼此重叠时看到它们，我在这里面临的问题是x 和 y 轴工作正常，但数据点由于某种原因没有更新。

我正在尝试选择点/圆圈并再次绘制它们，但由于某种原因我无法选择它们，我不知道为什么点没有更新，非常感谢任何帮助。

注意:我的应用程序位于 Angular 4 中，因为我在 plunker 中找不到 Angular 2/4 模板在 JavaScript 中执行操作。

Answer 1

您刚刚错过了 2 件小事:

1. 在缩放功能中，要使用的比例将是新的 X 和 Y 比例，因为您必须在新的 X 和 Y 比例中变换圆圈。域名。

   circles.attr('cx', (d) => xNewScale(d.duration))
      .attr('cy', (d) => yNewScale(d.priority));
   

2. 选择:

   var circles = svg.selectAll('dot')
     .data(chartData)
     ....
     .append('svg:title')
     .html(...)
   

实际上会返回“标题”作为当前选择，所以现在，变量circles是一个标题的节点组，其属性(cx和cy)在缩放功能中发生变化，而缩放功能并没有改变。我们想要什么，因为我们想要更改 <circle> 的属性s。因此，将上面的内容更改为以下内容:

// Add the scatterplot
var circles = svg.selectAll("dot")
  .data(chartData)
  .enter()
  ....
  .attr('fill' ..);

// NOTE THE CHANGE HERE
circles
  .append('svg:title')
  .html(d => {
    return 'Date : ' + timeFormat(new Date(d.start)) + ',<br> Description: ' + d.description + ',<br> Impact: ' + d.priority + ',<br> Hours: ' + Math.round(d.duration)
  });

同样，我对红色圆圈(外部)进行了更改。

包含上述所有内容，这是您的代码的分支:

https://plnkr.co/edit/61zf86q6cpIT4MIyhZKo?p=preview

希望这有帮助。