0

d3 を使用して、選択可能なデータ ポイントのキーと値のペアのテーブルを動的に生成したいと考えています。

たとえば、以下に貼り付けた data.csv ファイルには、4 つのデータ ポイントの x、y 値を svg の円としてプロットする d3 コードがあります。各円をクリックしたときにキーと値のペアのテーブルを生成できるようにしたいと考えています。したがって、point1 (行 1) のテーブルは次のようになります。

<table>
<thead>
<tr> <th>Key</th>  <th>Value</th>  </tr>
</thead>
<tbody>
<tr> <td>name</td> <td>point1</td> </tr>
<tr> <td>x</td>    <td>50</td>     </tr>
<tr> <td>y</td>    <td>200</td>    </tr>
<tr> <td>f</td>    <td>1</td>      </tr>
</tbody>
</table>

このテーブルは、選択されたデータ ポイントに応じて更新されます。ヘッダーは同じままですが、テーブルの内容は変更されることに注意してください。これまでのデータ例と私の d3 + html コードは以下のとおりです。どんな助けでも大歓迎です。

データ.csv

name,x,y,f
point1,50,170,1
point2,100,75,2
point3,150,125,3
point4,35,25,4

example.js

var svg = d3.select("body")
   .append("svg")
   .attr("width", 400)
   .attr("height", 200);

var mktable = function(dat) {
   console.log(dat)  // data is available!

   var tr = d3.select("tbody").selectAll("tr")
      .data(d3.keys(dat)).enter().append("tr")  

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

d3.text("data.csv", function(text) {
   var data = d3.csv.parse(text);

   svg.selectAll("circle")
      .data(data)
      .enter()
      .append("svg:circle")
      .attr("cx", function(d) {
         return parseFloat(d.x);
      })
      .attr("cy", function(d) {
         return parseFloat(d.y);
      })
      .attr("r", function(d) {
         return 3;
      })
      .on("mouseover", function() {
         d3.select(this)
            .attr("r", function(d) { return 7 });
      })
      .on("mouseout", function() {
         d3.select(this)
            .attr("r", function(d) { return 3 });
      })
      .on("click", mktable)
});

example.html

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Test</title>
     <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
 </head>
 <body>
   <script type="text/javascript" src="example.js"></script>
<table>
   <thead>
      <tr><th>Key</th><th>Value</th></tr>
   </thead>
   <tbody>
   </tbody>
</table>
 </body>
</html>
4

2 に答える 2

2

進行状況 - この mktable 関数は、最初のクリックで正しいテーブルを生成しますが、2 番目のポイントをクリックすると、それらを置き換えるのではなく余分なtd 要素が追加されます。

var mktable = function(dat, i) {
    var tr = d3.select("tbody").selectAll("tr")
        .data(d3.entries(dat));

     tr.enter().append("tr");

    tr.append("td")
        .text(function(d) { return d.key });

    tr.append("td")
        .text(function(d) { return d.value });

    tr.exit().remove();
 };
于 2013-03-30T09:31:19.037 に答える
0

属性を書き込むときに、クリック イベントを処理して属性を読み取ることもできます。circleしたがって、ベクトル要素に設定した任意の属性を読み取り、それらを使用してテーブルを生成できます。

追加の値が必要な場合data-は、円内の属性に保存できます (例: ) data-name。data-属性は、w3c 仕様に準拠するためにこのように構成されています。

あなたの場合、テーブルは HTML 要素であり、SVG 要素に追加できないため、テーブルの配置を簡単に実装するのは難しいと思います。おそらく、テーブルを でオーバーレイすることもできますが、値を表示するには、設定や追加、SVG 要素などz-indexの他の手法をお勧めします。title

于 2013-03-29T21:45:36.623 に答える