dc.js：如何在鼠标悬停时更改圆圈颜色答案

【问题标题】：dc.js : how to change circle color on mouseoverdc.js：如何在鼠标悬停时更改圆圈颜色
【发布时间】：2018-02-16 04:40:49
【问题描述】：

我试图在使用 dc.js 构建的时间序列图表中突出显示圆圈的颜色。我在网上找到了一些解决方案，他们提到了 SelectAll() 方法。但它会选择所有圆圈，而不是我做鼠标悬停的特定圆圈。

 chart.selectAll("circle")
      .style("fill", "orange")

有人可以帮助我在 dc.js 中将鼠标悬停在圆圈上吗

【问题讨论】：

显示填写您的代码。
不熟悉 dc.js，但您是否尝试过仅使用纯 CSS 指令？
请使用 [dc.js] 标签来回答与图表库相关的问题 - [dc] 完全不同。

标签： d3.js dc.js

【解决方案1】：

您需要使用this 关键字来引用您悬停的圆圈。我创建了一个简单的小提琴来帮助您入门。

var chart = d3.select('#chart')
  .style('fill', 'orange')

chart.selectAll('circle').on('mouseover', function() {
  d3.select(this).attr('fill', '#00c')
}).on('mouseout', function() {
  d3.select(this).attr('fill', 'orange')
})

<link href="https://dc-js.github.io/dc.js/css/dc.min.css" rel="stylesheet" />
<script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.15/d3.min.js"></script>
<svg id='chart' height="100" width="400">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3"  />
  <circle cx="80" cy="50" r="40" stroke="black" stroke-width="3"  />
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="3"  />
  <circle cx="150" cy="50" r="40" stroke="black" stroke-width="3"  />
</svg>

【讨论】：

感谢您的建议，但语法似乎不适用于 dc.js。您能否为 dc.js 推荐一个类似的语法？
@user3754877 您是否遇到任何错误？你能提供一个可行的例子吗？
您必须在渲染后执行此操作。或者更好，把它放在chart.on('pretransition', function() { ... })
这是一个更好的答案：stackoverflow.com/questions/29674385/… 谢谢@Gordon :)
@ Aditya K，请在下面找到我需要合并鼠标悬停颜色更改功能的工作示例。请帮助我进行更改。我尝试应用您和 Gordon 给出的建议，但似乎没有任何效果。 jsfiddle.net/cp4dpfry/9