d3.legend 力布局上的交互式图例

Question

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

我也在测试，每当我将鼠标悬停在一个节点上时，其他具有相同大小的节点将被突出显示。但是，它不起作用。我注意到 Mike Bostock 之前给出了示例，例如 //bl.ocks.org/mbostock/3087986 。我还提到了 Mike Bostok 对类似问题 Whosebug 的回答。com/questions/11206015/clicking-a-node-in-d3-from-a-button-outside-the-svg/11211391#11211391 但没有成功。最后，我希望我的 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

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

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

圆圈不正确 css 类。

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

Answer 2

至少有一个问题是 CSS classes 不能以数字开头（在你的情况下，5、10、15 等是 class 名称对于包含圆圈的组）。参见 the CSS specification。

具体引用如下：

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B WF".

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

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

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

这个有用吗？ http://plnkr.co/edit/6E0fkDWS87jYi4zbyPnd?p=preview

d3.legend 力布局上的交互式图例

Interactive Legend on force layout with d3.legend

javascript

csv

legend

d3.js