Question

我已经使用d3 js设置了一个表格，该表格可以在我的html中成功显示一个名为data.csv的已保存csv文件，如下所示：

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

这很好用，但是我想补充一点，如果用户单击任何行，它就会链接一些URL，例如：

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

我找到了一些有关如何执行此操作的示例，但它们与我正在执行的初始设置不同，因此它们不会翻译，而且我是JS noob，这使得更难理解这些解释进入我自己的设置

这是一个类似但不同的问题的示例答案，我无法弄清楚如何移植：

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

Answer 1

如前所述，您可以附加一个click事件处理程序，并将用户重定向到相应的链接

 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;
                    })

如何使用d3 js中的设置向表的每一行添加链接？

1 个答案: