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未定义（通过在返回之前添加console.log）。

对于这类事情，我是一个超级新手，所以任何人都可以给我的任何建议都会非常有帮助。

谢谢！

Answer 1

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

回到问题：即使没有查看该插件的文档，您也可以按类选择元素（在本例中为<div>）：

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

以下是更新的bl.ocks：http://bl.ocks.org/GerardoFurtado/70f2608e455b61514cc96dff6fe41ea6/65c940cb987ae1cbda5dc352cda54a382a945ae8

关于undefined：tip.style在事件被触发时没有收到数据，显然只有tip.html。为了确保你必须检查他们的源代码。

d3.js将d3-tip背景设置为元素颜色

1 个答案: