Как использовать D3 selectAll с несколькими именами классов

Я экспериментирую с использованием нескольких имен классов для элементов 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>

Ответ 1

Самый способ D3 сделать это - связать селектора с помощью метода filter:

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

Это не будет работать, потому что имена классов не могут начинаться с числа. Поэтому вам нужно переименовать что-то вроде "a101", а затем вы можете сделать

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

Смотрите эту скрипту.

Ответ 2

Другим способом, который я нашел для этого, является выбор обоих классов одновременно с одной строкой, например:

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

Это не сработает, если вы добавите промежуток между ними или добавьте запятую между ними (которая выбирает вещи, у которых есть либо класс вместо этого).