39

我正在尝试为 SVG 元素使用多个类名，以便（希望）我可以使用类名的 selectAll 和“部分”来选择它们的子集。不幸的是，我没有尝试过任何工作，也没有在网上找到一个例子。下面的代码演示了我正在尝试使用四个圆圈的简单示例来做什么。两个圆圈的类名是“mYc 101”，两个圆圈的类名是“mYc 202”。selectAll(".mYc") 给出所有四个圆圈。如果我只想要类名为“mYc 101”的圈子怎么办？这可以做到吗？如何？感谢时代无限！！

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id="my_div"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    var m_div = d3.select("#my_div");
    var m_svg = m_div.append("svg");

    var g = m_svg.append("g");

    g.append("circle")
        .attr("class", "mYc 101")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 50) 
        .attr("style", "stroke: green; stroke-width: 8; fill: #000000");

    g.append("circle")
        .attr("class", "mYc 101")
        .attr("cx", 300)
        .attr("cy", 100)
        .attr("r", 50) 
        .attr("style", "stroke: green; stroke-width: 8; fill: #000000");

    g.append("circle")
        .attr("class", "mYc 202")
        .attr("cx", 100)
        .attr("cy", 300)
        .attr("r", 50) 
        .attr("style", "stroke: blue; stroke-width: 8; fill: #000000");

    g.append("circle")
        .attr("class", "mYc 202")
        .attr("cx", 300)
        .attr("cy", 300)
        .attr("r", 50) 
        .attr("style", "stroke: blue; stroke-width: 8; fill: #000000");

    // This selects all four circles
    var list = d3.selectAll(".mYc");

    // But if I want to select only class "mYc 101", none of these work.
    // In fact they all give an error.
    // var list1 = d3.selectAll(".mYc 101");
    // var list1 = d3.selectAll(".mYc .101");
    // var list1 = d3.selectAll(".mYc.101");
    // var list1 = d3.selectAll(".mYc,.101");
    // var list1 = d3.selectAll(".101");

</script>
</body>
4

2 回答 2

56

执行此操作的最 D3 方法是使用以下filter方法链接选择器：

var list1 = d3.selectAll(".mYc").filter(".101");

但这不起作用，因为类名不能以数字开头。所以你必须重命名为“a101”，然后你可以做

var list1 = d3.selectAll(".mYc").filter(".a101");

看到这个小提琴。

于 2013-07-02T21:26:45.623 回答
39

我发现的另一种方法是同时选择两个类作为单个字符串，例如：

var list1 = d3.selectAll(".mYc.a101")

如果您在其间添加空格或在其间添加逗号（这会选择具有任一类的东西），它将不起作用。

于 2014-05-04T00:24:33.460 回答