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但没有成功。 Ulimately我希望我的Force Layout看起来像这样bl.ocks.org/Guerino1/raw/2879486/任何人都可以指出我的noob错误吗？

        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 字符作为数字代码（参见下一项）。例如，标识符＆＃34; B＆amp; W？＆＃34;可以写成＆＃34; B \＆amp; W \？＆＃34;或＆＃34; B \ 26 W \ 3F＆＃34;。

另一个问题是（大概）你想要定位圈子本身而不是整个群体，它们具有类.node.15。假设您将数字类更改为以下划线开头。然后d3.selectAll（＆＃34; .node._15＆＃34;）将使用大小为15的圆圈定位所有组。然后，您可以通过将高亮显示功能中的第二行替换为以下内容来定位圆圈：

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

最后一件事（我认为）是因为CSS特异性，使用类.node.active定位项目不会覆盖直接添加到html中的元素的样式。取代＆＃34;风格＆＃34;通过＆＃34; attr＆＃34;当你定义svg元素的填充颜色时，应该解决这个问题。

这有用吗？ 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类。

此外，您正在将未定义的内容传递到突出显示功能中。尝试使用高亮（d）而不是高亮（d.size）。

使用d3.legend强制布局的交互式图例

2 个答案: