D3.js将D3-TIP背景设置为元素颜色

Question

我已经使用以下代码创建了一个散点图：

http://bl.ocks.org/peterssonjonas/4a0e7cb8d23231243e0e

但是，我想根据所选元素的颜色或添加与颜色相关的数据列(即d.Colour(。

来更改工具提示的背景。

该代码当前通过以下行基于所选元素生成工具提示文本：

  var tip = d3.tip()
  .attr("class", "d3-tip")
  .offset([-10, 0])
  .html(function(d) {
    return xCat + ": " + d[xCat] + "<br>" + yCat + ": " + d[yCat];
  });

我希望通过添加类似：

.style("background", function(d) { return d.colour; })

我能够实现这一目标。但是，当我这样做时，我发现D不确定(通过在返回之前添加台。

当谈到这种事情时，我是一个超级新手，所以任何人都可以给我的任何建议都会非常有帮助。

谢谢！

Answer 1

这是一个积极的批评：不要使用d3-tip或任何其他插件来创建您的工具提示。自己创建它们。这样，您可以更好地控制它们并按照自己的方式自定义它们。

回到问题：甚至不查看该插件的文档，您可以按类：

选择该元素(在这种情况下为 <div>(：

d3.select(".d3-tip").style("background-color", color(d[colorCat]));

这是更新的bl.ocks：http：//bl.ocks.org/gerardofurtado/70F2608E455B6151514CC96DFF6FFE41EA6/65C940CB940CB987AE1CBDA5DA5DC352C352C352C35CDA544AAE942AE382AE382AE942A382A38888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888带范范表

关于undefined：tip.style在启动事件时未接收基准，显然只有tip.html才能。为了确保您必须检查其源代码。