Как использовать 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>

svg d3.js selectall
person Bill Doss    schedule 02.07.2013    source источник

Ответы (2)


arrow_upward
55
arrow_downward

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

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

Однако это не сработает, потому что имена классов не могут начинаться с цифры. Итак, вам нужно переименовать что-то вроде «a101», а затем вы можете сделать

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

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

person Lars Kotthoff    schedule 02.07.2013
comment
Большое спасибо, Ларс!! Суть заключалась в том, что имена классов не могут начинаться с цифры. Счет - person Bill Doss; 03.07.2013

arrow_upward
39
arrow_downward

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

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

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

person bobfet1    schedule 04.05.2014
comment
Ответ Ларса более полный, но именно он помог мне понять. - person David; 09.11.2016
comment
кроме того, вы можете использовать var list1 = d3.selectAll("circle.mYc.a101") - person Felix; 14.07.2017