How to get information during mouseover in d3

by

2👍

✅

Append img tag to each div and set the title attribute of the image as its container div color.

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Leave a comment