Question

我必须选择具有特定transform属性的SVG元素，只知道它的一部分。让我用一个例子来解释一下。这些是我想要选择的元素：

<g transform='matrix(96, 0, 0, -96, 217.04, 43.052)'></g>
<g transform='matrix(96, 0, 0, -96, 317.04  53.052)'></g>
<g transform='matrix(96, 0, 0, -96, 417.04, 63.052)'></g>
<g transform='matrix(96, 0, 0, -96, 517.04, 73.052)'></g>
<g transform='matrix(96, 0, 0, -96, 617.04, 83.052)'></g>

我想全部选择它们并且（最初）使用类似下面代码的内容听起来像个好主意：

d3.selectAll("g").filter("[transform='matrix(96, 0, 0, -96)]'");

问题在于，不经意地，选择被返回为空，我想知道如何告诉d3只选择那些在变换属性的前4个参数上匹配的<g>元素。 / p>

Answer 1

您可以在一个选择器中组合g的初始选择和过滤：

d3.selectAll("g[transform^='matrix(96, 0, 0, -96']");

请注意attribute selector中使用^=：

<强> [ATTR ^ =值]
表示属性名称为attr的元素，其值的前缀为＆＃34; value＆＃34;。

工作演示：

＆＃13;

var filtered = d3.selectAll("g[transform^='matrix(96, 0, 0, -96']");
console.log(filtered.size());  // 3: The first three groups

＆＃13;

<script src="https://d3js.org/d3.v4.js"></script>

<svg>
  <g transform="matrix(96, 0, 0, -96, 217.04, 43.052)"></g>
  <g transform="matrix(96, 0, 0, -96, 317.04  53.052)"></g>
  <g transform="matrix(96, 0, 0, -96, 417.04, 63.052)"></g>
  <g transform="matrix(10, 0, 0, -96, 517.04, 73.052)"></g> <!--different transform-->
  <g transform="matrix(20, 0, 0, -96, 617.04, 83.052)"></g> <!--different transform-->
</svg>

＆＃13;

当然，您也可以从群组中分割过滤＆＃39;选择：

d3.selectAll("g").filter("[transform^='matrix(96, 0, 0, -96']");

或者，为了更好地控制过滤，您可以为selection.filter()提供过滤功能，从而可以访问所选元素以及绑定到它们的数据。

d3.selectAll("g")
  .filter(function(d, i, nodes) {   // Most versatile approach
    return d3.select(this)
      .attr("transform")
        .startsWith("matrix(96, 0, 0, -96");
        // .lastIndexOf("matrix(96, 0, 0, -96", 0);  // For those on IE
  });

虽然所有这些解决方案都会产生相同的结果，但正确的解决方案可能会在性能，简单性和多功能性之间进行权衡。

D3.js - 选择知道属性的一部分

1 个答案: