how to add button table column using d3.js?

Question

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

this is my code..i have created table using d3.js..here i just want to add button in column.how to add button in column for each row?? and if i click the button it will show the alert message here i have used data in json format

Cyril Cherian · Accepted Answer · 2016-05-27 06:35:51Z

2

First make a header.

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

Then to the rows add selector and pass the data, create a td then on that td make a button and then finally register a listener for click.

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

working code here

answered May 27, 2016 at 6:35

Cyril Cherian

32.4k7 gold badges48 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sai Rajesh Over a year ago

how to access particular row when i click that row button?

Sai Rajesh Over a year ago

i mean if click first row button ,i have to alert that rows data

Cyril Cherian Over a year ago

check the console console.log(d); here d is that row's data

Cyril Cherian Over a year ago

Or i have added the row's data in the alert check the plunk plnkr.co/edit/6snKLi4QIyZOt7H1p9Dq?p=preview

SiddP · Accepted Answer · 2016-05-27 06:23:57Z

1

Append button to your cell class:

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

Here is a working example http://jsbin.com/xogawac/edit?html,output

answered May 27, 2016 at 6:23

SiddP

1,6712 gold badges15 silver badges40 bronze badges

4 Comments

Sai Rajesh Over a year ago

i have to make as a column

Sai Rajesh Over a year ago

i have to create one column that column contains this button

Sai Rajesh Over a year ago

then if i click 1st row button means it shows alert message as that rows data

SiddP Over a year ago

@SaiRajesh I think Cyril has answered it perfectly.

Collectives™ on Stack Overflow

how to add button table column using d3.js?

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related