Question

我在d3中使用工具提示功能。我想从数据库中获取数据并将其显示在工具提示中，但在每个信息位之前都有标题。这是到目前为止的代码，只显示一行中没有标题的所有信息：

function mouseHandler(d, i) {

d3.json("connection3.php?paperID="+d.ID, function(error,data) {

                var myList = ""
                data.forEach(function(d) {
                    myList = myList + d.ID + d.TITLE + d.AUTHOR;
                    })

                tooltip.transition()
                    .duration(200)
                    .style("opacity", .9);
                tooltip.html(myList)

            })
            }

我希望使用类似var html = " ID: TITLE: Authors: ";的内容，以便每个标题后跟数据库中的相关信息，每个标题和信息都在不同的行上。但我似乎无法让这个工作。我试着做了

var html = "<p> ID: "myList + d.ID" " </p> <br> <p>TITLE: </p><br><p> Authors: </p><br>";

但是我收到一个关于未识别字符串的错误。我知道这可能是一个非常愚蠢的问题，但我已经坚持了很久！我是d3的新手，所以任何帮助都表示赞赏！提前致谢

Answer 1

使用d3.keys函数。

var myList = ""
data.forEach(function(d) {
    d3.keys(d).forEach(function(key){
       myList = myList +"<p> "+key+": "+ d[key] +" </p><br>"
    });
});

d3.keys（对象）

返回包含指定对象的属性名称的数组   （关联数组）。

参考：https://github.com/mbostock/d3/wiki/Arrays#d3_keys

＆＃13;

var data = [{id: 123, title: 'item1'},{id: 456, title: 'item2'}];
var myList = ""
data.forEach(function(d) {
  d3.keys(d).forEach(function(key) {
    myList = myList + "<p> " + key.toUpperCase() + ": " + d[key] + " </p>"
  });
});
document.write(myList);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

在工具提示d3中显示db中的文本和数据

1 个答案: