简体   繁体   中英

How do I add links to each row of a table using this set up in d3 js?

I have set up a table using d3 js that successfully displays a saved csv file, called data.csv, in my html like so:

<script type="text/javascript"charset="utf-8">
            d3.text("/Users/cool_stuff/data.csv", function(data) {

                var parsedCSV = d3.csv.parseRows(data);

                var container = d3.select("#meowwoof")
                    .selectAll("tr")
                        .data(parsedCSV).enter()
                        .append("tr")

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


 </script>


<tbody id="meowwoof">

</tbody>

This works great but I would like to add so if the user clicks on any row, it links so some URL that is, for example:

https://www.google.com/ + *value in first column of the given row thye clicked on*

I have found a few examples talking about how to do this, but they are for different initial set ups than what I am doing and thus they do not translate, and I am JS noob which makes it even harder to fit the explanations into my own setup

This is an example answer to a similar but different question I have not been able to figure out how to port:

d3 adding html links to a column of data in a table

As pointed out, you can attach a click event handler and redirect the user to the corresponding link

 var container = d3.select("#meowwoof")
                .selectAll("tr")
                    .data(parsedCSV).enter()
                    .append("tr")
                    .selectAll("td")
                    .data(function(d) { return d; })
                    .enter()
                    .append("td")
                    .text(function(d) {
                          return d;
                        }
                    )
                    .on('click',d=>{
                        // Assuming parsedCsv contains and d is a link
                        window.location.href = d;
                    })

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM