未加星标

D3 js tooltip issue for Choropleth Map

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2019 | 作者 红领巾 ] 0人收藏点击收藏

i am new to D3.js. I have been trying to add tooltip to the existing d3 chloropleth Map by Michelle Chandra. However i am unable to make any progress, the tooltip doesnt seem to appear. Where am i doing wrong? Any Help will be appreciated. http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922 .

Thanks

<style type="text/css"> /* On mouse hover, lighten state color */ path:hover { fill-opacity: .7; } /* Style for Custom Tooltip */ div.tooltip { position: absolute; text-align: center; width: 60px; height: 28px; padding: 2px; font: 12px sans-serif; background: white; border: 0px; border-radius: 8px; pointer-events: none; } /* Legend Font Style */ body { font: 11px sans-serif; } /* Legend Position Style */ .legend { position:absolute; left:800px; top:350px; } </style> </head> <body> <script type="text/javascript"> /* This visualization was made possible by modifying code provided by: Scott Murray, Choropleth example from "Interactive Data Visualization for the Web" https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html Malcolm Maclean, tooltips example tutorial http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html Mike Bostock, Pie Chart Legend http://bl.ocks.org/mbostock/3888852 */ //Width and height of map var w = 900; var h = 600; // D3 Projection var projection = d3.geo.albersUsa() .translate([w/2, h/2]) // translate to center of screen .scale([1000]); // scale things down so see entire US // Define path generator var path = d3.geo.path() // path generator that will convert GeoJSON to SVG paths .projection(projection); // tell path generator to use albersUsa projection // Define linear scale for output var color = d3.scale.linear() .range(["rgb(24,143,95)","rgb(51,188,196)","rgb(155,226,183)","rgb(217,91,67)"]); var legendText = ["Cities Lived", "States Lived", "States Visited", "States Not Visited Yet"]; //Create SVG element and append map to the SVG var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); // Append Div for tooltip to SVG var div = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); // Load in my states data! d3.csv("stateslived.csv", function(data) { color.domain([0,1,2,3]); // setting the range of the input data // Load GeoJSON data and merge with states data d3.json("us-states.json", function(json) { // Loop through each state data value in the .csv file for (var i = 0; i < data.length; i++) { // Grab State Name var dataState = data[i].state; // Grab data value var dataValue = data[i].visited; // Find the corresponding state inside the GeoJSON for (var j = 0; j < json.features.length; j++) { var jsonState = json.features[j].properties.name; if (dataState == jsonState) { // Copy the data value into the JSON json.features[j].properties.visited = dataValue; // Stop looking through the JSON break; } } } // Bind the data to the SVG and create one path per GeoJSON feature svg.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path) .style("stroke", "#fff") .style("stroke-width", "1") .style("fill", function(d) { // Get data value var value = d.properties.visited; if (value) { //If value exists… return color(value); } else { //If value is undefined… return "rgb(213,222,217)"; } }); // Map the cities I have lived in! d3.csv("cities-lived.csv", function(data) { svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", function(d) { return projection([d.lon, d.lat])[0]; }) .attr("cy", function(d) { return projection([d.lon, d.lat])[1]; }) .attr("r", function(d) { return Math.sqrt(d.years) * 4; }) .style("fill", "rgb(217,91,67)") .style("opacity", 0.85) // add browser tooltip of city name //.append("title") //.text(function(d) { // return d.place; //}); // Modification of custom tooltip code provided by Malcolm Maclean, "D3 Tips and Tricks" // http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html .on("mouseover", function(d) { d3.select(this).transition().duration(300).style("opacity", 1); div.transition().duration(200) .style("opacity", .9); div.text(d.properties.visited) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) // fade out tooltip on mouse out .on("mouseout", function(d) { div.transition() .duration(500) .style("opacity", 0); }); }); // Modified Legend Code from Mike Bostock: http://bl.ocks.org/mbostock/3888852 var legend = d3.select("body").append("svg") .attr("class", "legend") .attr("width", 140) .attr("height", 200) .selectAll("g") .data(color.domain().slice().reverse()) .enter() .append("g") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("rect") .attr("width", 18) .attr("height", 18) .style("fill", color); legend.append("text") .data(legendText) .attr("x", 24) .attr("y", 9) .attr("dy", ".35em") .text(function(d) { return d; }); }); }); /* This code generate paths without mapping to other data // Load JSON file and generate path for each state d3.json("us-states.json", function(json) { // file path, callback function called when data loaded svg.selectAll("path") // creates empty references to all the paths .data(json.features) // loop through our data (the states in the array) and bind to paths .enter() // create placeholder to reference the new elements .append("path") // add to the DOM! .attr("d", path) // generate paths for each state .style("fill", "steelblue"); // make the states blue! }); */ </script>

I'm not sure what this statement is supposed to do:

d3.select(this).transition().duration(300).style("opacity", 1);

It appears to select the window object. One would need to look at your json file to see if you're getting the right data into the div.

Shameless plug. Take a look at foxToolTip.js. I think its easier and more flexible than d3tip.

https://github.com/MichaelRFox/foxToolTip.js

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:D3 js tooltip issue for Choropleth Map
本站链接:https://www.codesec.net/view/628534.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(215)