web-dev-qa-db-ja.com

複数のクラス名でD3 selectAllを使用する方法

SVG要素に複数のクラス名を使用して実験しているので、（できれば）クラス名のselectAllと "parts"を使用してそれらのサブセットを選択できます。残念ながら、私は作品を試したことはなく、オンラインでサンプルを見つけていません。以下のコードは、4つの円の簡単な例で私がやろうとしていることを示しています。 2つの円にはクラス名「mYc 101」があり、2つの円にはクラス名「mYc 202」があります。 selectAll（ "。mYc"）は、4つすべての円を提供します。クラス名「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>
svgd3.jsselectall
34
Bill Doss

これを行う最もD3の方法は、filterメソッドを使用してセレクターをチェーンすることです。

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

ただし、クラス名を数字で始めることはできないため、これは機能しません。したがって、「a101」などの名前に変更する必要があります。

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

this fiddle を参照してください。

51
Lars Kotthoff

私がこれを行うことがわかった別の方法は、両方のクラスを単一の文字列として同時に選択することです、たとえば：

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

間にスペースを追加したり、間にコンマを追加したりすると、機能しません（代わりにいずれかのクラスを持つものが選択されます）。

36
bobfet1