Question

我正在使用和处理d3图表。现在我的功能是我动态创建一个div并使用scale将颜色放在div中线性它工作正常现在我的需要是我需要谷歌pinrest像位置通知我把它放在所有div当我鼠标悬停它我需要显示什么颜色的名称代码特别是div帮助如何做到这一点。< / p>

这里附上我的代码以及应该在div中放置什么图像只是为了参考任何图像都可以放在div中

小提琴：http://jsfiddle.net/TMCby/12/

段：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <style type="text/css" media="screen">
    div {
      width: 60px;
      height: 60px;
      float: left;
      margin: 1px;
    }
  </style>
</head>

<body>

  <script src="http://d3js.org/d3.v3.js"></script>

  <script type="text/javascript">
    debugger;
    var body = d3.select("body"),
      length = 10,
      color = d3.scale.linear().domain([1, length])

      .range(["blue", "red"]);


    for (var i = 0; i < length; i++) {
      body.append('div').attr('style', function(d) {
        return 'background-color: ' + color(i);
      });
    }
  </script>

</body>

</html>

＆＃13;

Answer 1

将img标记附加到每个div，并将图像的title属性设置为容器div颜色。

action

var body = d3.select("body"),
  length = 10,
  color = d3.scale.linear().domain([1, length]).range(["blue", "red"]);

for (var i = 0; i < length; i++) {
  body.append('div')
    .attr('style', function(d) {
      return 'background-color: ' + color(i);
    })
    .append("img")
    .attr("height", "15px")
    .attr("width", "15px")
    .attr("src", "https://i.stack.imgur.com/O9xB5.png")
    .attr("title", color(i));
}

div {
  width: 60px;
  height: 60px;
  float: left;
  margin: 1px;
  display:flex;
  align-items:center;
  justify-content:center;
}

如何在d3中鼠标悬停期间获取信息

1 个答案: