2
2014年と2012年に基づいて異なるデータを表示する2つの別々のマップを持つダッシュボードがあります。エリアごとに私がする必要があるのは、2つのマップのいずれかをマウスオーバーすると、それぞれのマップ上に同時に2012年と2014年の地図のツールチップを表示することです。両方を同時にどのように表示できますか？私はこれに助けていただければ幸いです。ありがとう。D3jsのマップの1つに表示されたときに複数のマップのツールチップを表示するには
<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <title>Test dashboard</title>
\t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
\t <style>
\t \t #gujarat-viz-2017, #buttons {
\t \t \t border-right: 1px solid #ccc
\t \t }
\t \t .container {
\t \t \t background-color: #d5e8ec;
\t \t }
\t \t .const0 {
\t \t \t display: none;
\t \t }
\t \t .emptyparty {
\t \t \t fill:#f9f9f1;
\t \t }
\t \t .emptyparty:hover, .constituency:hover {
\t \t \t fill:#ccc;
\t \t }
\t \t .hidden { display: none; }
\t \t .showtooltip { position: absolute; z-index: 10000; background-color: #333;
\t \t border-radius: 10px; color: #fff; padding: 5px; }
\t \t /*Party colors*/
\t \t .bjp{ fill: #f88101;}
\t \t .inc{ fill: #6da736;}
\t \t .ncp{ fill: #076598;}
\t \t .gpp{ fill: #5a469d;}
\t \t .ind{ fill: #25a29a;}
\t \t .jdu{ fill: #eb4d4c;}
\t </style>
</head>
<body>
\t <div class="container">
\t \t <div class="row">
\t \t \t <div id="gujarat-viz-2014" class="col-md-6">
\t \t \t \t <h2>2014</h2>
\t \t \t </div>
\t \t \t <div id="gujarat-viz-2012" class="col-md-6">
\t \t \t \t <h2>2012</h2>
\t \t \t \t
\t \t \t </div>
\t \t </div> <!-- .row -->
\t </div>
\t <script src="http://www.thehindu.com/static/js/jquery-1.10.2.min.js"></script>
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> \t
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.js"></script>
\t <script src="https://d3js.org/topojson.v2.min.js"></script>
\t <script>
\t \t function map_function(map_settings){
// Global variables
var margin = { top: 50, left:50, right:50, bottom:50 },
height = 400 - margin.top - margin.bottom,
width = 500 - margin.left - margin.right;
// Create SVG canvas with responsive resizing
var svg = d3.select(map_settings["htmlelement"])
.append("svg")
.attr("viewBox", "0 0 " + width + " " + height)
.attr("preserveAspectRatio", "xMinYMin")
.append("g")
.attr("class", "data"+map_settings["year"])
// Add a tooltip to visualization
var tooltip = d3.select('body').append('div')
.attr('class', 'hidden showtooltip')
.attr('id', "tooltip"+map_settings["year"])
// queue and read the topojson, json data file
d3.queue()
.defer(d3.json, "https://api.myjson.com/bins/17m3if")
.defer(d3.json, map_settings.data)
.await(render_map)
var projection = d3.geoMercator()
.scale(3000)
.center([71.5, 22.3])
.translate([width/2, height/2])
var geoPath = d3.geoPath()
.projection(projection)
function render_map(error, mapshape, mapdata){
var constituency = topojson.feature(mapshape, mapshape.objects.collection).features;
dataMap = {};
mapdata.forEach(function(d){
dataMap[d.constNo] = d;
})
var fill_function = function(d) {
// d3.select(this).attr('fill', "white")
} // end of mousemove_function
var mousemove_function = function(d) {
var constinfo = dataMap[d.properties.AC_NO];
// console.log(constinfo.constituencyName)
// console.log(d3.select(this).data()[0].properties)
var html = "<p>"+constinfo.constituencyName+"</p>"
tooltip.classed('hidden', false)
.html(html)
.style("left", (d3.event.clientX - 10) + "px")
.style("top", (d3.event.clientY - 45) + "px");
} // end of mousemove_function
var class_function = function(d) {
var constinfo = dataMap[d.properties.AC_NO];
var className = "constituency ";
if(constinfo !== undefined) {
className += ("c"+constinfo.constNo+" ")
className += constinfo.leadingParty.replace(/[^a-zA-Z ]/g, "").toLowerCase()
} else {
className += "emptyparty"
className += " const"
className += d.properties.AC_NO
}
return className;
} // end of class_function
var mouseout_function = function(d) {
tooltip.classed('hidden', true)
} // end of mousemove_function
svg.selectAll(".constituency")
.data(constituency)
.enter().append("path")
.attr("d", geoPath)
.attr('class', class_function)
.attr('fill', "white")
.attr('stroke', "#e8e8e8")
.attr('stroke-width', "0.5")
.on('mouseover', mousemove_function)
.on('mouseout', mouseout_function)
} // render_map
} // map_function
\t \t var gujarat_data_2014 = {
\t \t \t htmlelement: "#gujarat-viz-2014",
\t \t \t data: "https://api.myjson.com/bins/yolfr",
\t \t \t year: "2014"
\t \t };
\t \t var gujarat_data_2012 = {
\t \t \t htmlelement: "#gujarat-viz-2012",
\t \t \t data: "https://api.myjson.com/bins/19ztxj",
\t \t \t year: "2012"
\t \t };
\t \t map_function(gujarat_data_2014);
\t \t map_function(gujarat_data_2012);
\t </script>
</body>
</html>
ありがとうございます。それは問題なく動作しますが、マップ上に表示される情報は、対応するデータファイルのデータではなく、すべてのツールチップに重複して表示されます。たとえば、この行 'var html ="
"+ constinfo.constituencyName +"
"+""+ constinfo.leadingParty +"
"を編集すると、この行を表示することができます。 –@EuniceDhivya、その場合、データを隠すのに 'd3.local'を使います。そのため、あなたはそれをクロージャの外側にアクセスできます。更新プログラム[ここ]（http://plnkr.co/edit/hCxNYL6WUZCbx7gzHPAr?p=preview）を参照してください。 – Mark