Wie knöpfe Tabelle Spalte mit d3.js hinzufügen?

<html> 
 
<head> 
 
<title>table with sparkline</title> 
 
<script src="d3.min.js"></script> 
 
<style> 
 
.line { 
 
    fill: none; 
 
    stroke: steelblue; 
 
    stroke-width: 1.0px; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
th, td { 
 
    padding: 8px; 
 
    text-align: left; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
th{ 
 
    background-color:#f5f5f5; 
 
} 
 
/*tr:hover{background-color:#f5f5f5} 
 
</style> 
 
</head> 
 
<body> 
 
<h4>a table</h4> 
 
<div id="table"></div> 
 
<script> 
 
var columns = ['Fruit', 'Color', 'Lines'] 
 

 
var data = [ 
 
    ['Orange', 'Orange', [1,2,3,1,6]], 
 
    ['Apple', 'Red', [6,2,6,5,5]], 
 
    ['Grape', 'Purple', [9,1,2,3,1]] 
 
] 
 

 
// create table 
 
var table = d3.select("#table").append("table"); 
 

 
var thead = table.append("thead").append("tr"); 
 

 
thead.selectAll("th") 
 
    .data(columns) 
 
    .enter() 
 
    .append("th") 
 
    .text(function(d) { 
 
     return d; 
 
    }); 
 

 
var tbody = table.append("tbody"); 
 

 
var trows = tbody 
 
    .selectAll("tr") 
 
    .data(data) 
 
    .enter() 
 
    .append("tr"); 
 

 
var tcells = trows 
 
    .selectAll("td") 
 
    .data(function(d, i) { return d; }) 
 
    .enter() 
 
    .append("td") 
 
    .text(function(d, i) { return d; }); 
 

 
// update (add a column with graphs) 
 
thead.append("th").text('Graphs'); 
 

 
trows.selectAll("td.graph") 
 
//use a class so you don't re-select the existing <td> elements 
 
      .data(function(d) {return [d[2]];}) 
 
      .enter() 
 
      .append("td") 
 
      .attr("class", "graph") 
 
      .each(lines); 
 

 

 
// a sparklines plot 
 
function lines(test) { 
 
    var width = 100, height = 20; 
 

 
    var data = [] 
 
    for (i = 0; i < test.length; i++) { 
 
     data[i] = { 
 
      'x': i, 
 
      'y': +test[i] 
 
     } 
 
    } 
 
    
 
    var x = d3.scale.linear() 
 
     .range([0, width - 10]) 
 
     .domain([0,5]); 
 
    
 
    var y = d3.scale.linear() 
 
     .range([height, 0]) 
 
     .domain([0,10]); 
 
    
 
    var line = d3.svg.line() 
 
       .x(function(d) {return x(d.x)}) 
 
       .y(function(d) {return y(d.y)}); 
 
    
 
    d3.select(this).append('svg') 
 
      .attr('width', width) 
 
      .attr('height', height) 
 
     .append('path') 
 
      .attr('class','line') 
 
      .datum(data) 
 
      .attr('d', line);  
 

 
} 
 
</script> 
 
</body> 
 
</html>

dies ist mein code..i erstellen Tabelle d3.js..here mit Ich möchte nur Taste in column.how hinzuzufügen für jede Zeile hinzufügen Schaltfläche in der Spalte ?? und wenn ich auf die Schaltfläche klicken, wird es die Warnmeldung anzeigen hier i Daten im JSON-Format

Quelle

2016-05-27 Sai Rajesh

Zuerst eine Überschrift machen.

thead.append("th").text('Action');

dann zu dem Zeilen-Selektor hinzufügen und die Daten übergeben, ein td dann erstellen, die auf den td ein button machen und dann schließlich einen Listener für Klick registrieren.

trows.selectAll("td.button") 
//use a class so you don't re-select the existing <td> elements 
      .data(function(d) {return [d];}) 
      .enter() 
      .append("td") 
      .attr("class", "button") 
      .append("button") 
      .text(function(d){return "Do Something"}) 
      .on("click", function(d){ console.log(d); alert("hello")});//attach listener

Arbeits Code here

Quelle

2016-05-27 06:35:51 Cyril

wie bestimmte Zeile zugreifen, wenn ich auf diese Zeile Schaltfläche klicke? –

Ich meine, wenn klicken Sie auf die erste Zeile Schaltfläche, ich muss die Zeilen Daten –

überprüfen Sie die Konsole 'console.log (d);' Hier d ist die Daten dieser Zeile – Cyril

Append-Taste, um Ihr Handy-Klasse verwendet haben:

var button = $("<button>Button</button>"); 
button.click(function() { 
    alert("here i have used data in json format : "+JSON.stringify(data)); 
}); 
button.appendTo(".graph");

Hier ist ein funktionierendes Beispiel http://jsbin.com/xogawac/edit?html,output

Quelle

2016-05-27 06:23:57 SiddP

i als eine Spalte machen –

ich habe eine Spalte zu erstellen, die Spalte auf diese Schaltfläche enthält –

dann, wenn i-Taste 1. Zeile klicken bedeutet, zeigt es Warnmeldung wie die Zeilen Daten –

Wie knöpfe Tabelle Spalte mit d3.js hinzufügen?

Antwort

Verwandte Themen