Fatal编程技术网
  • svg/
  • Svg 如何将D3 selectAll与多个类名一起使用

Svg 如何将D3 selectAll与多个类名一起使用

svg d3.js

Svg 如何将D3 selectAll与多个类名一起使用,svg,d3.js,selectall,Svg,D3.js,Selectall,我正在尝试为SVG元素使用多个类名，以便（希望）可以使用selectAll和类名的“parts”来选择其中的一个子集。不幸的是，我试过的东西都不管用，我也没有在网上找到一个例子。下面的代码演示了我试图用一个简单的四个圆的例子来做什么。两个圆的类名为“myc101”，两个圆的类名为“myc202”。selectAll（“.mYc”）给出所有四个圆。如果我只想要类名为“myc101”的圆怎么办？这能做到吗？怎么用？谢谢无限倍 <!DOCTYPE html> <meta charse

我正在尝试为SVG元素使用多个类名，以便（希望）可以使用selectAll和类名的“parts”来选择其中的一个子集。不幸的是，我试过的东西都不管用，我也没有在网上找到一个例子。下面的代码演示了我试图用一个简单的四个圆的例子来做什么。两个圆的类名为“myc101”，两个圆的类名为“myc202”。selectAll（“.mYc”）给出所有四个圆。如果我只想要类名为“myc101”的圆怎么办？这能做到吗？怎么用？谢谢无限倍

<!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>


var m#u div=d3.选择（“我的div”）；
var m_svg=m_div.append（“svg”）；
var g=m_svg.append（“g”）；
g、 附加（“圆圈”）
.attr（“类别”、“mYc 101”）
.attr（“cx”，100）
.attr（“cy”，100）
.attr（“r”，50）
.attr（“样式”，“笔划：绿色；笔划宽度：8；填充：#000000”）；
g、 附加（“圆圈”）
.attr（“类别”、“mYc 101”）
.attr（“cx”，300）
.attr（“cy”，100）
.attr（“r”，50）
.attr（“样式”，“笔划：绿色；笔划宽度：8；填充：#000000”）；
g、 附加（“圆圈”）
.attr（“类别”，“mYc 202”）
.attr（“cx”，100）
.attr（“cy”，300）
.attr（“r”，50）
.attr（“样式”，“笔划：蓝色；笔划宽度：8；填充：#000000”）；
g、 附加（“圆圈”）
.attr（“类别”，“mYc 202”）
.attr（“cx”，300）
.attr（“cy”，300）
.attr（“r”，50）
.attr（“样式”，“笔划：蓝色；笔划宽度：8；填充：#000000”）；
//这将选择所有四个圆
var list=d3。选择全部（“.mYc”）；
//但是，如果我只想选择类“myc101”，这些都不起作用。
//事实上，他们都给出了一个错误。
//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.选择全部（“.101”）；
最常用的D3方法是使用
过滤器
方法链接选择器：

var list1 = d3.selectAll(".mYc").filter(".101");
但这不起作用，因为类名不能以数字开头。因此，您必须重命名为类似“a101”的名称，然后才能执行此操作

var list1 = d3.selectAll(".mYc").filter(".a101");
请参阅。

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

var list1 = d3.selectAll(".mYc.a101")
如果你在两个类之间加一个空格，或者在两个类之间加一个逗号（这会选择有两个类的对象），这就行不通了。

非常感谢Lars！！关键是类名不能以数字开头。BillLars的答案更完整，但这是帮助我理解的答案。此外，您可以使用
var list1=d3.selectAll（“circle.mYc.a101”）