使用 d3.legend 进行力布局的交互式图例

Question

我希望创建一个交互式图例。我正在研究从 .csv 文件填充的力导向图。我希望当鼠标悬停在图例上时突出显示节点。我正在使用 Susie Lu 为我的传奇创建的 d3.legend 库。

我还在测试，每当我将鼠标悬停在一个节点上时，其他具有相同大小的节点都会被突出显示。但是，它不起作用。我注意到 Mike Bostock 之前给出的示例，例如 //bl.ocks.org/mbostock/3087986。我还提到了 Mike Bostok 对类似问题 stackoverflow.com/questions/11206015/clicking-a-node- 的回答in-d3-from-a-button-outside-the-svg/11211391#11211391 但没有成功。 Ulitmately 我希望我的 Force Layout 看起来像这样 bl.ocks.org/Guerino1/raw/2879486/ 谁能指出我的菜鸟错误？

        var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("g")
      .attr("r", function(d) { return d.size; })
       .attr("class", function(d) { return "node " + d.size; })
      .style("fill", function (d) { return color(d.group); })
      .on("mouseover", function(d) { highlight(d.size); });

            node.append("circle")
                    .style("fill", function(d) { return color(d.group); })
                    .attr("r",function(d) { return d.size; });

function highlight(type) {
   if (type == null) d3.selectAll(".node").classed("active", false);
   else d3.selectAll(".node." + type).classed("active", true);
}

完整编码请参考http://jsfiddle.net/rajaiskandar/os8622yb/。有什么方法可以将我的 .csv 文件上传到 jsfiddle？我已经自定义了 les_mis.csv 。

这是现在的样子

提前谢谢你

Answer 1

至少其中一个问题是 CSS 类不能以数字开头（在您的情况下，5、10、15 等是包含圆圈的组的类名）。见the CSS specification。

这是具体的引用：

在 CSS 中，标识符（包括元素名称、类和 ID） 选择器）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A1 及更高，加上连字符 (-) 和下划线 (_);它们不能以数字或连字符后跟数字开头。 标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（见下一项）。例如， 标识符“黑白？”可以写成“B\&W\?”或“B\26 W\3F”。

另一个问题是（大概）您希望针对的是圈子本身，而不是具有 .node.15 类的整个组。假设您将数字类更改为以下划线开头。然后 d3.selectAll(".node._15") 将针对所有圆圈大小为 15 的组。然后您可以通过将突出显示功能中的第二行替换为以下内容来定位圆圈：

d3.selectAll(".node._" + type.size + ">circle")

最后一件事（我认为）是由于 CSS 的特殊性，使用 .node.active 类定位项目不会覆盖直接在 html 中添加到元素的样式。当你定义 svg 元素的填充颜色时，用“attr”替换“style”应该可以解决这个问题。

这行得通吗？ http://plnkr.co/edit/6E0fkDWS87jYi4zbyPnd?p=preview

Answer 2

如果您使用开发人员工具（例如 firebug）分析代码，则当您将鼠标悬停在某个节点上时会收到此错误消息：

Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '.node.5' is not a valid selector.

圆圈没有正确的 css 类。

此外，您正在传递一些未定义到突出显示函数中的内容。尝试使用 highlight(d) 而不是 highlight(d.size)。