互动传说强制布局与d3.legend

我期待创造一个互动的图例。我正在研究一个从.csv文件填充的强制定向图。我希望鼠标悬停在图例上时突出显示节点。我正在使用Susie Lu为我的传奇创建的d3.legend库。互动传说强制布局与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我想我的力量布局看起来像这样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。

这是它目前看起来像

预先感谢您

来源

2015-11-20 R. Iskandar

小提琴不工作。没有办法添加csv。您可以添加代表您真实数据的虚拟数据。 – seb

对不起，迟到的回应。我现在使用plnkr作为完整的代码。请参阅链接http://plnkr.co/edit/JGYS5grLzqrfn5GFj87q?p=preview。谢谢 –

至少有一个问题是CSS类不能以数字开头（在你的情况下，5,10,15等是包含这些圆的组的类名）。请参阅the CSS specification。

这里的具体举：

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

另一个问题是（大概）你想要针对的是圈子本身，而不是整个组，它具有class .node.15。假设您将数字类更改为以下划线开头。然后d3.selectAll（” node._15" ）将针对各组大小为15的圆，然后你可以通过一些替代第二行中的亮点功能，例如目标的圆圈：

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

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

这是行不通的？ http://plnkr.co/edit/6E0fkDWS87jYi4zbyPnd?p=preview

来源

2015-12-01 22:45:32 mar

感谢您花时间和精力来解释它。我会消化你的解释并尝试。您放在plnkr上的示例在悬停在相同大小的节点上时出色地工作。我的下一步是使它与d3.legend一起工作，因为这是我的最初目标。然后创建一个鼠标移出功能。再次感谢！如果我将它与d3.legend配合使用，我会让你知道。 –

如果你有一个开发工具分析你的代码，如萤火虫，当您将收到此错误信息悬停在您的一个节点上：

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

圆圈没有正确的CSS类。

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

来源

2015-11-24 08:55:42 seb

对不起，改变亮点后仍然不起作用（d） –

互动传说强制布局与d3.legend

回答

相关问题