Question

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

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

注意：我的应用程序位于Angular 4，因为我在angular 2/4中无法在plunker中找到JavaScript模板

Answer 1

你错过了两件小事：

在缩放功能中，要使用的比例是新的X和Y比例，因为您要转换圈子新域名。

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

选择：
```
<circle>
```

实际上会返回＆＃34;标题＆＃34;作为当前选择现在，变量 circle 是一个节点组的标题，其属性（cx和cy）在缩放功能中变化，这不是我们想要的，因为我们想要更改属性// 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) });的。{因此，将上述内容更改为以下内容：

{{1}}

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

包含以上所有内容，这里是代码的分支：

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

希望这有帮助。

D3 v4 Scatterplot图表数据点未在缩放时更新

1 个答案: