web-dev-qa-db-ja.com

d3 selectAll：結果を数える

SelectAllで一致したノードの数をカウントするにはどうすればよいですか？ （結合データなし）

または、データがある場合、選択からデータをカウントする方法は？ （「data（function ...）」で設定したため、事前に長さがわからない場合）

d3.jsselectall
22
Vituel

d3.selectAll(data).size()を使用するだけです。この例が役立つことを願っています。

 var matrix = [
   [11975,  5871, 8916, 2868],
   [ 1951, 10048, 2060, 6171],
   [ 8010, 16145, 8090, 8045],
   [ 1013,   990,  940, 6907]
 ];

 var tr = d3.select("body").append("table").selectAll("tr")
            .data(matrix)
            .enter().append("tr");

 var td = tr.selectAll("td")
          .data(function(d) { return d; })
          .enter().append("td")
          .text(function(d) { return d; });
 var tdSize=tr.selectAll("td").size();

完全なjsfiddle here 。

48
Gabriel

以前にこれを行った1つの方法は、新しいオブジェクトを作成して、その情報をデータ関数に渡すことです。

 .data(function(d) {         
     return d.Objects.map(function(obj) {
         return {
             Object: obj,
             TotalObjects: d.Objects.length
         }
   });

次に、更新部分でオブジェクトを使用し、カウントを使用可能にします。

.attr("x", function(d) {

    return d.Object.X;
 })
 .attr("y", function(d) {

    return d.TotalObjects;
 })
2
Andy Lewis

データ数を取得するには、.selectAll（）および.data（）の後に、.size（）の前に.enter（）が必要であるように見えます：

legend_count = legendBoxG.selectAll("legend.box")
                         .data(curNodesData, (d) -> d.id)
                         .enter()
                         .size()

.enter（）がない場合、結果は0です。enter（）は、データカウントを返します。 （上記のコードはコーヒーの方言で示されています。）

カウントを取得する必要がありますbefore svgオブジェクトに属性を追加し（適切にスケーリングするため）、前述の例はいずれもそれを行いませんでした。ただし、上記のようにカウントを変数に取り除いた後、さらに属性を追加することはできません。したがって、上記のアプローチはdata（）およびenter（）の操作を示していますが、実際のソリューションではありません。代わりに、データ配列自体の長さを取得しますbefore selectAll（）を実行します。データ配列自体の長さプロパティ（関数ではない）を使用して、最も簡単にそれを行うことができます。

 legend_count = curNodesData.length
0
user2958908

要素の属性を設定するなど、コールバック関数から長さを便利に取得したい場合、次のように3番目の引数から取得できるようです。

node
    .attr('some-property', (d, i, a) => {
        // d = the individual data point
        // i = the index of the data point (0, 1, 2, 3, etc)
        // a = the array of data points
        // a.length = the size/length of the data points / dataset
        return ( some calculation involving a.length or whatever);
    });

私の人生では、これはd3のドキュメントにどこにも記載されていませんでしたが、コールバック関数は forEach javascript関数のように疑わしく見えたので、暗闇でショットを撮りました。動いた。だから、あなたは自分の責任で使うと思う（誰かがこれをd3で文書化されている場所に私を指し示すことができない限り）。

0
V. Rubinetti