D3 折线图无法正确显示工具提示和数据点

【问题标题】：D3 line chart does not show tool tip and data points properlyD3 折线图无法正确显示工具提示和数据点
【发布时间】：2015-10-24 05:00:17
【问题描述】：

我使用 D3.js 设计了折线图。然后我为它设置数据点和工具提示。画了一条线。但它还没有显示数据点和工具提示。谁能告诉我我错在哪里？ 谢谢你。 这是我的代码....

<html>
<head>
<title>myD3Trial1</title>
<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="jquery.tipsy.js"></script>     
<link href="tipsy.css" rel="stylesheet" type="text/css" />       
<style>
.axis path,
.axis line{
    fill: none;
    stroke: blue;
     stroke-width: 2px;
  }

.line{
    fill: none;
    stroke: black;
    stroke-width: 1px;
  }

.tick text{
    font-size: 12px;
  }

.tick line{
    opacity: 0.2;
  }  
</style>    
</head>
<body>
<script>
    
    var xAxisGroup = null,
	    dataCirclesGroup = null,
	    dataLinesGroup = null; 
    
    var maxDataPointsForDots = 50,
	    transitionDuration = 1000; 
    
   var pointRadius = 4; 
      
    var data = [{
            "creat_time": "2013-03-12 05:09:04",
            "record_status": "ok",
            "roundTripTime": "0"
        }, {
            "creat_time": "2013-03-12 14:59:06",
            "record_status": "ok",
            "roundTripTime": "0"
        }, {
            "creat_time": "2013-03-12 14:49:04",
            "record_status": "ok",
            "roundTripTime": "0"
        }, {
            "creat_time": "2013-03-13 14:39:06",
            "record_status": "ok",
            "roundTripTime": "0"
        },{
            "creat_time": "2013-03-12 14:29:03",
            "record_status": "ok",
            "roundTripTime": "0"
    }];
    var margin = {top: 20, right: 20, bottom: 30, left: 50};
    var width = 960 - margin.left - margin.right;
    var height = 100 - margin.top - margin.bottom;
    var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
    var x = d3.time.scale()
        .range([0, width]);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var line = d3.svg.line()
        .x(function(d) { return x(d.creat_time); })
        .y(function(d) { return y(d.roundTripTime); });


    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    data.forEach(function(d) {
        d.creat_time = parseDate(d.creat_time);
        d.roundTripTime = +d.roundTripTime;
    });

    x.domain(d3.extent(data, function(d) { return d.creat_time; }));
    y.domain(d3.extent(data, function(d) { return d.roundTripTime;}));

    svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

    

    svg.append("path")
          .datum(data)
          .attr("class", "line")
          .attr("d", line);
    
   
    // Draw the points
    
	if (!dataCirclesGroup) {
		dataCirclesGroup = svg.append('svg:g');
	}

	var circles = dataCirclesGroup.selectAll('.data-point')
		.data(data);

	circles
		.enter()
			.append('svg:circle')
				.attr('class', 'data-point')
				.style('opacity', 1e-6)
				.attr('cx', function(d) { return xAxis(d.x) })
				.attr('cy', function() { return yAxis(d.y) })
				.attr('r', function() { return (data.length <= maxDataPointsForDots) ? pointRadius : 0 })
			.transition()
			.duration(transitionDuration)
				.style('opacity', 1)
				.attr('cx', function(d) { return xAxis(d.x) })
				.attr('cy', function(d) { return yAxis(d.y) });

	circles
		.transition()
		.duration(transitionDuration)
			.attr('cx', function(d) { return xAxis(d.x) })
			.attr('cy', function(d) { return yAxis(d.y) })
			.attr('r', function() { return (data.length <= maxDataPointsForDots) ? pointRadius : 0 })
			.style('opacity', 1);

	circles
		.exit()
			.transition()
			.duration(transitionDuration)
				// Leave the cx transition off. Allowing the points to fall where they lie is best.
				//.attr('cx', function(d, i) { return xAxis(i) })
				.attr('cy', function() { return y(0) })
				.style("opacity", 1e-6)
				.remove();

      $('svg circle').tipsy({ 
        gravity: 'width', 
        html: true, 
        title: function() {
          var d = this.__data__;
	  //var pDate = d.x;
          return d.x; 
        }
      });    

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

【问题讨论】：

    标签： javascript jquery d3.js charts


    【解决方案1】：

    首先，应该使用缩放函数 x 和 y 来定位您的圆圈，而不是 xAxis 和 yAxis 函数。

    其次，您继续使用d.x 和d.y，但您的数据没有x 和y 属性（提示，它确实有“creat_time”和“roundTripTime”）。

    第三，你对如何处理enter 和update 模式感到很困惑。在enter 上，只需执行附加即可。在update 上进行定位。

    第四，只在.transition() 调用之后放置你想要转换的东西（即不透明度）。

    将所有建议放在一起：

    <html>
<head>
<title>myD3Trial1</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="https://rawgit.com/jaz303/tipsy/master/src/javascripts/jquery.tipsy.js"></script>     
<link href="https://rawgit.com/jaz303/tipsy/master/src/stylesheets/tipsy.css" rel="stylesheet" type="text/css" />       
<style>
.axis path,
.axis line{
    fill: none;
    stroke: blue;
     stroke-width: 2px;
  }

.line{
    fill: none;
    stroke: black;
    stroke-width: 1px;
  }

.tick text{
    font-size: 16px;
  }

.tick line{
    opacity: 0.2;
  }  
</style>    
</head>
<body>
<script>
    
    var xAxisGroup = null,
	    dataCirclesGroup = null,
	    dataLinesGroup = null; 
    
    var maxDataPointsForDots = 50,
	    transitionDuration = 1000; 
    
   var pointRadius = 4; 
      
    var data = [{
            "creat_time": "2013-03-12 05:09:04",
            "record_status": "ok",
            "roundTripTime": "0"
        }, {
            "creat_time": "2013-03-12 14:59:06",
            "record_status": "ok",
            "roundTripTime": "0"
        }, {
            "creat_time": "2013-03-12 14:49:04",
            "record_status": "ok",
            "roundTripTime": "0"
        }, {
            "creat_time": "2013-03-13 14:39:06",
            "record_status": "ok",
            "roundTripTime": "0"
        },{
            "creat_time": "2013-03-12 14:29:03",
            "record_status": "ok",
            "roundTripTime": "0"
    }];
    var margin = {top: 20, right: 20, bottom: 30, left: 50};
    var width = 960 - margin.left - margin.right;
    var height = 100 - margin.top - margin.bottom;
    var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
    var x = d3.time.scale()
        .range([0, width]);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var line = d3.svg.line()
        .x(function(d) { return x(d.creat_time); })
        .y(function(d) { return y(d.roundTripTime); });


    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    data.forEach(function(d) {
        d.creat_time = parseDate(d.creat_time);
        d.roundTripTime = +d.roundTripTime;
    });

    x.domain(d3.extent(data, function(d) { return d.creat_time; }));
    y.domain(d3.extent(data, function(d) { return d.roundTripTime;}));

    svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

    

    svg.append("path")
          .datum(data)
          .attr("class", "line")
          .attr("d", line);
    
   
    // Draw the points
    
	if (!dataCirclesGroup) {
		dataCirclesGroup = svg.append('svg:g');
	}

	var circles = dataCirclesGroup.selectAll('.data-point')
		.data(data);

	circles
		.enter()
			.append('svg:circle')
				.attr('class', 'data-point')
				.style('opacity', 1e-6);

	circles
		.attr('cx', function(d) { return x(d.creat_time) })
		.attr('cy', function(d) { return y(d.roundTripTime) })
		.attr('r', function() { return (data.length <= maxDataPointsForDots) ? pointRadius : 0 })
		.transition()
		.duration(transitionDuration)
		.style('opacity', 1);

	circles
		.exit()
			.transition()
			.duration(transitionDuration)
				// Leave the cx transition off. Allowing the points to fall where they lie is best.
				//.attr('cx', function(d, i) { return xAxis(i) })
				.attr('cy', function() { return y(0) })
				.style("opacity", 1e-6)
				.remove();

      $('svg circle').tipsy({ 
        gravity: 'width', 
        html: true, 
        title: function() {
          console.log(this.__data__);
          var d = this.__data__;
	  //var pDate = d.x;
          return d.creat_time.toLocaleDateString(); 
        }
      });

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

    【讨论】：

      猜你喜欢
      • 2017-06-24
      • 1970-01-01
      • 1970-01-01
      • 2013-01-09
      • 2023-03-24
      • 2019-03-02
      • 1970-01-01
      • 2022-08-14
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode