d3でマウスオーバー中に情報を取得する方法

-1

私はd3チャートを使用しています。今私の機能はdivを動的に作成し、scaleを使ってdivに色を入れます。
リニアそれは私の必要性が私の必要性です私はすべてのdivに私はそれが私はどの色名のコードは、特定のdivのこれを行う方法を助ける必要があることを示す必要があります。d3でマウスオーバー中に情報を取得する方法

は、ここに私のコードを添付し、どのような画像は、任意の画像をdiv要素

フィドルの内側に配置することができますちょうどrefrenceのためのdivの内側に配置する必要があります。http://jsfiddle.net/TMCby/12/

スニペット：

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

出典

2017-05-17 jose

各divにimgタグを追加し、イメージのtitle属性をコンテナdivの色として設定します。

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>

出典

2017-05-17 11:24:25 Gilsha

http://stackoverflow.com/questions/44039946/how-to-plot-the-image-inside-the-polygon-in-d3ヘルプ@@ Gilsha – jose

ハイテク@ギルシャの提案 – jose

あなたのコードを見てください。今すぐフィドルを作りました。数分待ちます。 – Gilsha

d3でマウスオーバー中に情報を取得する方法

答えて

関連する問題