javascript - D3 折线图未正确显示工具提示和数据点-6ren

javascript - D3 折线图未正确显示工具提示和数据点

转载作者：行者123 更新时间：2023-11-30 00:20:35

我使用 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>

最佳答案

首先，应该使用缩放函数 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>