如何使用d3創建鍵值對的動態表格

我想動態生成一個使用d3爲可選數據點設置鍵值對的表格。如何使用d3創建鍵值對的動態表格

例如，對於下面粘貼的data.csv文件，我有d3代碼，它將4個數據點的x，y值繪製成svg中的圓圈。我希望能夠在每個圓圈被點擊時生成一個鍵值對的表格。因此，對於點1（行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代碼。任何幫助非常感謝。

data.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>

來源

2013-03-29 wannymahoots

當你寫ATTR ibutes，你也可以閱讀它們，處理點擊事件。因此，您可以讀取在矢量元素circle中設置的任何屬性，並使用它們生成表格。

如果您需要額外的值，可以將它們保存在圈內的data-屬性中，例如data-name。 data-屬性以這種方式構建，以符合w3c規範。

在你的情況下，我認爲表格對齊將很難以簡單的方式實現，因爲表格是一個HTML元素，它不能附加到SVG元素。您可以用z-index覆蓋表格，但我建議您使用其他技術來顯示值，例如設置title或附加和SVG元素。

來源

2013-03-29 21:45:36 danza

進展 - 這mktable函數生成正確的表的第一次點擊，但點擊第二個點增加了額外的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-30 09:31:19 wannymahoots

如何使用d3創建鍵值對的動態表格

回答

相關問題