javascript - D3.JS 带点图的工具提示

标签 javascript html d3.js 

<!DOCTYPE html>
<html lang="en">
    <head>
        <h1>  Amount of money spent on gas in a week vs Distance from work(miles)<h1/> 
        <meta charset="utf-8">
        <title>D3: Labels removed</title>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
        <style type="text/css">

            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }

            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }

            .d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}


        </style>

    </head>
    <body>
        <script type="text/javascript">





            //Width and height
            var w = 1000;
            var h = 610;
            var padding = 50;




            //Static dataset
            var dataset = [
                            [63, 45], [60, 43], [10, 12], [95, 60], [30, 15]
                          ];

            /*
            //Dynamic, random dataset
            var dataset = [];                   //Initialize empty array
            var numDataPoints = 50;             //Number of dummy data points to create
            var xRange = Math.random() * 1000;  //Max range of new x values
            var yRange = Math.random() * 1000;  //Max range of new y values
            for (var i = 0; i < numDataPoints; i++) {                   //Loop numDataPoints times
                var newNumber1 = Math.floor(Math.random() * xRange);    //New random integer
                var newNumber2 = Math.floor(Math.random() * yRange);    //New random integer
                dataset.push([newNumber1, newNumber2]);                 //Add new number to array
            }
            */

            //Create scale functions
            var xScale = d3.scale.linear()
                        .domain([0, 100])         // This is what is written on the Axis: from 0 to 100
                        .range([0, w]); 

            var yScale = d3.scale.linear()
                            .domain([0, 100 ])         // This is what is written on the Axis: from 0 to 100
                        .range([h, 0]); 

            var rScale = d3.scale.linear()
                                 .domain([5, 5])
                                 .range([5, 5]);

            //Define X axis
            var xAxis = d3.svg.axis()
                              .scale(xScale)
                              .orient("bottom")
                              .ticks(5);

            //Define Y axis
            var yAxis = d3.svg.axis()
                              .scale(yScale)
                              .orient("left")
                              .ticks(5);

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            //Create circles
            svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    return xScale(d[0]);
               })
               .attr("cy", function(d) {
                    return yScale(d[1]);
               })
               .attr("r", function(d) {
                    return rScale(d[1]);
               });

                var tip = d3.tip()
                .attr('class', 'd3-tip')
                .offset([-10, 0])
                .html(function(d) {
                return "<strong>dataset:</strong> <span style='color:red'>" + d.dataset + "</span>";})
                 svg.selectAll("circle")



                   svg.selectAll("circle")
      .data(dataset)
    .enter().append("rect")
      .attr("class", "circle")
      .attr("x", function(d) { return x(d.dataset); })
      .attr("width", 0)
      .attr("y", function(d) { return y(d.dataset); })
      .attr("height", function(d) { return height - y(d.dataset); })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)





                //X AND Y text
                svg.append("text")
                .attr("class", "y label")
                .attr("text-anchor", "end")
                .attr("x", -175)
                .attr("y", 12)
                .attr("transform", "rotate(-90)")
                .text("Distance from work (Miles) ")
                .attr("font-size",'12pt')
                .attr("font-weight","bold");

                  svg.append("text")
                .attr("class", "y label")
                .attr("text-anchor", "end")
                .attr("x", 700)
                .attr("y", 600)
                .text("Amount of money spent on gas in a week ")
                .attr("font-size",'12pt')
                .attr("font-weight","bold");
            /*
            //Create labels
            svg.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) {
                    return d[0] + "," + d[1];
               })
               .attr("x", function(d) {
                    return xScale(d[0]);
               })
               .attr("y", function(d) {
                    return yScale(d[1]);
               })
               .attr("font-family", "sans-serif")
               .attr("font-size", "11px")
               .attr("fill", "red");
               */

            //Create X axis
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + (h - padding) + ")")
                .call(xAxis);

            //Create Y axis
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + padding + ",0)")
                .call(yAxis);


function type(d) {
  d.dataset = +d.dataset;
  return d;


}


        </script>
    </body>
</html>

您好，我正在尝试向我的圈子添加工具提示。当我运行代码时，我的控制台中没有出现错误，这让我认为它可以工作，但事实并非如此。我认为我错过了一些简单的东西，但我一般不确定。非常感谢有关此问题的任何帮助。我认为 var.tip 部分最大的问题在于

最佳答案

代码中存在一些问题:

  1. 工具提示插件应绑定(bind)到数据可视化，如 quick usage instructions 中所述。 :

/* Invoke the tip in the context of your visualization */ vis.call(tip)

在您的情况下，应在创建圆圈之前执行svg.call(tip)。

  • 出于某种原因，mouseover 和 mouseout 事件监听器附加到某些矩形(分类为 circle)，而不是附加到圆圈。

  • 工具提示是使用 d.dataset 填充的，该数据集不存在，因此未定义。假设您要显示x, y坐标，则可以使用d。

    • 下面的代码片段说明了修复方法。

    附注您可能需要使用更新版本的 d3 和工具提示插件，以便从最新的错误修复和其他增强功能中受益。

    //Width and height
    			var w = 1000;
    			var h = 610;
    			var padding = 50;
    			
    
    			 
    		
    			//Static dataset
    			var dataset = [
    							[63, 45], [60, 43], [10, 12], [95, 60], [30, 15]
    						  ];
    			
    			//Create scale functions
    			var xScale = d3.scale.linear()
    			            .domain([0, 100])         // This is what is written on the Axis: from 0 to 100
                            .range([0, w]); 
    
    			var yScale = d3.scale.linear()
    			                .domain([0, 100 ])         // This is what is written on the Axis: from 0 to 100
                            .range([h, 0]); 
    
    			var rScale = d3.scale.linear()
    								 .domain([5, 5])
    								 .range([5, 5]);
    
    			//Define X axis
    			var xAxis = d3.svg.axis()
    							  .scale(xScale)
    							  .orient("bottom")
    							  .ticks(5);
    
    			//Define Y axis
    			var yAxis = d3.svg.axis()
    							  .scale(yScale)
    							  .orient("left")
    							  .ticks(5);
    
    			//Create SVG element
    			var svg = d3.select("body")
    						.append("svg")
    						.attr("width", w)
    						.attr("height", h);
    
    
    
    			    var tip = d3.tip()
                    //.attr('class', 'd3-tip')
                    //.offset([-10, 0])
                    .html(function(d) {
                    return "<strong>dataset:</strong> <span style='color:red'>" + d + "</span>";})
                    
                     svg.call(tip)
                     
    			//Create circles
    			svg.selectAll("circle")
    			   .data(dataset)
    			   .enter()
    			   .append("circle")
    			   .attr("cx", function(d) {
    			   		return xScale(d[0]);
    			   })
    			   .attr("cy", function(d) {
    			   		return yScale(d[1]);
    			   })
    			   .attr("r", function(d) {
    			   		return rScale(d[1]);
    			   })
          .on('mouseover', tip.show)
          .on('mouseout', tip.hide)
    
    
    
    
                       svg.selectAll("circle")
          .data(dataset)
        .enter().append("rect")
          .attr("class", "circle")
          .attr("x", function(d) { return x(d.dataset); })
          .attr("width", 0)
          .attr("y", function(d) { return y(d.dataset); })
          .attr("height", function(d) { return height - y(d.dataset); })
    
    
        
    
    
                    //X AND Y text
                    svg.append("text")
    			    .attr("class", "y label")
    			    .attr("text-anchor", "end")
    			    .attr("x", -175)
    			    .attr("y", 12)
    			    .attr("transform", "rotate(-90)")
    			    .text("Distance from work (Miles) ")
    			    .attr("font-size",'12pt')
    			    .attr("font-weight","bold");
    
    			      svg.append("text")
    			    .attr("class", "y label")
    			    .attr("text-anchor", "end")
    			    .attr("x", 700)
    			    .attr("y", 600)
    			    .text("Amount of money spent on gas in a week ")
    			    .attr("font-size",'12pt')
    			    .attr("font-weight","bold");
    		
    		  				
    			//Create X axis
    			svg.append("g")
    				.attr("class", "axis")
    				.attr("transform", "translate(0," + (h - padding) + ")")
    				.call(xAxis);
    			
    			//Create Y axis
    			svg.append("g")
    				.attr("class", "axis")
    				.attr("transform", "translate(" + padding + ",0)")
    				.call(yAxis);
    
    				
    function type(d) {
      d.dataset = +d.dataset;
      return d;
    				
    
    }
    .axis path,
    			.axis line {
    				fill: none;
    				stroke: black;
    				shape-rendering: crispEdges;
    			}
    			
    			.axis text {
    				font-family: sans-serif;
    				font-size: 11px;
    			}
    
    			.d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    <script src="https://d3js.org/d3.v3.min.js"></script>
    		<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

    关于javascript - D3.JS 带点图的工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61089092/

    上一篇：javascript - 在对数据库中的多个查询进行每次过滤后，如何存储数据

    下一篇：javascript - react 待办事项列表过滤器

    相关文章：

    javascript - 如何在Material UI中在我的输入字段前添加货币符号

    javascript - 如何通过 AJAX 使用 Wicked wizard gem？

    javascript - 存储 HTTP/SOAP 请求，以防无可用连接

    javascript - 使用 d3.js 在 SVG 中放置 Canvas (chart.js 折线图)

    javascript - CSS transform-origin 不适用于 safari 中的 svg

    javascript - 在 html5 中旋转嵌入的 pdf

    javascript - 图片幻灯片淡入淡出

    html - 使整个 <li> 中的 <a> 链接可点击

    html - 如何将Access表数据放到光介质上？

    angularjs - nvd3 图表开始在浏览器中被压扁

    ©2024 IT工具网  联系我们