如何根据条件改变折线图中数据点的颜色？

Desi Delite 发表于 Dev

德西Delite

我使用D3.js设计了折线图。该线仅在x轴上移动。它包含数据点，当鼠标在该数据点上移动时，仅显示一个工具提示，其中包含有关该数据点的某些特定数据。我需要一个接一个地添加数据点，这意味着第一个数据点出现，而下一个数据点在1分钟后出现。等等。因此，我在一个时间段内将数据点附加到该行中。这意味着我设置了一个setInterval函数，并且在该函数内部一个数据点一个接一个地追加。（为此，我逐步增加了一个保存数据的数组，每次覆盖数据点时，它都显示为在时间间隔内追加了新数据点。）

然后，我需要更改特定数据点的颜色。根据此示例，如果特定数据元素具有“ A”作为其“记录”值，那么我需要更改其数据点的颜色。但是由于覆盖或任何其他错误，它无法正常工作。有人可以告诉我我在哪里错了吗？有没有可能比这种方式更容易地完成此任务？

（我尽力解释了一下。有时候您可能听不懂我在说什么。因此也许这段代码可以帮助您正确理解它）

<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="tipsy.css" rel="stylesheet" type="text/css" />  
 <link rel="stylesheet" type="text/css" href="D3LineChart.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: bold 11px;
  }

.tick line{
    opacity: 0.2;
  }  
</style>    
</head>
<body>
    
<div class="chart3"></div>
    
<script>
    
    var line_xAxisGroup = null,
	    line_dataCirclesGroup = null,
	    line_dataLinesGroup = null; 
    
    var line_maxDataPointsForDots = 50,
	    line_transitionDuration = 1000; 
    
   var line_pointRadius = 7; 
    
   var line_parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;  
    
    //set original data set for here
    
   var OriginalDataForLineChart = [{
            "Date": "2013-03-12 05:09:04",
            "Record":"A",
            "Value": "0"
        }, {
            "Date": "2013-03-12 14:59:06",
            "Record":"B",
            "Value": "0"
        }, {
            "Date": "2013-03-12 14:49:04",
            "Record":"C",
            "Value": "0"
        }, {
            "Date": "2013-03-13 14:39:06",
            "Record":"D",
            "Value": "0"
        },{
            "Date": "2013-03-12 14:29:03",
            "Record":"A",
            "Value": "0"
    }];
       
    var line_margin = {top: 20, right: 20, bottom: 30, left: 50};
    var line_width = 1100 - line_margin.left - line_margin.right;
    var line_height = 100 - line_margin.top - line_margin.bottom;
    
    var line_x = d3.time.scale()
        .range([0, line_width]);

    var line_y = d3.scale.linear()
        .range([line_height, 0]);

    var line_xAxis = d3.svg.axis()
        .scale(line_x)
        .orient("bottom");

    var line_yAxis = d3.svg.axis()
        .scale(line_y)
        .orient("left");

    var line_line = d3.svg.line()
        .x(function(d) { return line_x(d.Date); })
        .y(function(d) { return line_y(d.Value); });


    var line_svg = d3.select(".chart3").append("svg")
        .attr("width", line_width + line_margin.left + line_margin.right)
        .attr("height", line_height + line_margin.top + line_margin.bottom)
        .append("g")
        .attr("transform", "translate(" + line_margin.left + "," + line_margin.top + ")");

    OriginalDataForLineChart.forEach(function(d) {
        d.Date = line_parseDate(d.Date);
        d.Value = +d.Value;
    });

    line_x.domain(d3.extent(OriginalDataForLineChart, function(d) { return d.Date; }));
    line_y.domain(d3.extent(OriginalDataForLineChart, function(d) { return d.Value;}));

    line_svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + line_height + ")")
          .call(line_xAxis);

    

    line_svg.append("path")
          .datum(OriginalDataForLineChart)
          .attr("class", "line")
          .attr("d", line_line);
    
    var i = 1;
    var interval = setInterval(function() {
        updateLineChart(i);
        i++;
        if(i==OriginalDataForLineChart.length)  clearInterval(interval);
    },1000);
    
    
    var duplicateDataForLineChart = [];
    
function updateLineChart(index){
    
    for(var counut2 = 0 ; counut2<index ; counut2++){
        duplicateDataForLineChart[counut2] = OriginalDataForLineChart[counut2];
    }
        
    if (!line_dataCirclesGroup) {
		line_dataCirclesGroup = line_svg.append('svg:g');
	}

	var line_circles = line_dataCirclesGroup.selectAll('.data-point').data(duplicateDataForLineChart);
		//.data(data);

	line_circles
		.enter()
			.append('svg:circle')
				.attr('class', 'data-point')
				.style('opacity', 1e-6);
    
    for(var x=0 ; x<duplicateDataForLineChart.length ; x++){  //<==I add this for loop to change data point color
        if(duplicateDataForLineChart[x].Record=="A"){
            line_circles
		        .enter()
                .append('svg:circle')
				.attr('class', 'data-point')
				.style('opacity', 1e-6)
                .style('fill','#FF45FF');
        }
    }
      
	line_circles
		.attr('cx', function(d) { return line_x(d.Date); })
		.attr('cy', function(d) { return line_y(d.Value); })
		.attr('r', function() { return (duplicateDataForLineChart.length <= line_maxDataPointsForDots) ? line_pointRadius : 0 })
		.transition()
		.duration(line_transitionDuration)
		.style('opacity', 1);

	line_circles
		.exit()
			.transition()
			.duration(line_transitionDuration)
				// Leave the cx transition off. Allowing the points to fall where they lie is best.
				//.attr('cx', function(d, i) { return line_xAxis(i) })
				.attr('cy', function() { return line_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.line_x;
          return d.Date;//.toLocaleDateString();//+'</br>'+d.Date.to; 
        }
    });
       
    }
    

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

tejesh95

我已经删除了for循环，因为不需要它。我们可以添加一个回调函数来检查“ A”类型记录，并在满足条件的情况下将“填充”属性设置为红色。

<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="tipsy.css" rel="stylesheet" type="text/css" />  
 <link rel="stylesheet" type="text/css" href="D3LineChart.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: bold 11px;
  }

.tick line{
    opacity: 0.2;
  }  
</style>    
</head>
<body>
    
<div class="chart3"></div>
    
<script>
    
    var line_xAxisGroup = null,
	    line_dataCirclesGroup = null,
	    line_dataLinesGroup = null; 
    
    var line_maxDataPointsForDots = 50,
	    line_transitionDuration = 1000; 
    
   var line_pointRadius = 7; 
    
   var line_parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;  
    
    //set original data set for here
    
   var OriginalDataForLineChart = [{
            "Date": "2013-03-12 05:09:04",
            "Record":"A",
            "Value": "0"
        }, {
            "Date": "2013-03-12 14:59:06",
            "Record":"B",
            "Value": "0"
        }, {
            "Date": "2013-03-12 14:49:04",
            "Record":"C",
            "Value": "0"
        }, {
            "Date": "2013-03-13 14:39:06",
            "Record":"D",
            "Value": "0"
        },{
            "Date": "2013-03-12 14:29:03",
            "Record":"A",
            "Value": "0"
    }];
       
    var line_margin = {top: 20, right: 20, bottom: 30, left: 50};
    var line_width = 1100 - line_margin.left - line_margin.right;
    var line_height = 100 - line_margin.top - line_margin.bottom;
    
    var line_x = d3.time.scale()
        .range([0, line_width]);

    var line_y = d3.scale.linear()
        .range([line_height, 0]);

    var line_xAxis = d3.svg.axis()
        .scale(line_x)
        .orient("bottom");

    var line_yAxis = d3.svg.axis()
        .scale(line_y)
        .orient("left");

    var line_line = d3.svg.line()
        .x(function(d) { return line_x(d.Date); })
        .y(function(d) { return line_y(d.Value); });


    var line_svg = d3.select(".chart3").append("svg")
        .attr("width", line_width + line_margin.left + line_margin.right)
        .attr("height", line_height + line_margin.top + line_margin.bottom)
        .append("g")
        .attr("transform", "translate(" + line_margin.left + "," + line_margin.top + ")");

    OriginalDataForLineChart.forEach(function(d) {
        d.Date = line_parseDate(d.Date);
        d.Value = +d.Value;
    });

    line_x.domain(d3.extent(OriginalDataForLineChart, function(d) { return d.Date; }));
    line_y.domain(d3.extent(OriginalDataForLineChart, function(d) { return d.Value;}));

    line_svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + line_height + ")")
          .call(line_xAxis);

    

    line_svg.append("path")
          .datum(OriginalDataForLineChart)
          .attr("class", "line")
          .attr("d", line_line);
    
    var i = 1;
    var interval = setInterval(function() {
        updateLineChart(i);
        
        if(i==OriginalDataForLineChart.length + 1)  clearInterval(interval);
        i++;
    },1000);
    
    
    var duplicateDataForLineChart = [];
    
function updateLineChart(index){
    
    for(var counut2 = 0 ; counut2<index ; counut2++){
        duplicateDataForLineChart[counut2] = OriginalDataForLineChart[counut2];
    }
        
    if (!line_dataCirclesGroup) {
		line_dataCirclesGroup = line_svg.append('svg:g');
	}

	var line_circles = line_dataCirclesGroup.selectAll('.data-point').data(duplicateDataForLineChart);
		//.data(data);

	line_circles
		.enter()
			.append('svg:circle')
				.attr('class', 'data-point')
				.style('opacity', 1e-6);
  
      
	line_circles
		.attr('cx', function(d) { return line_x(d.Date); })
		.attr('cy', function(d) { return line_y(d.Value); })
		.attr('r', function() { return (duplicateDataForLineChart.length <= line_maxDataPointsForDots) ? line_pointRadius : 0 })
        .style('fill', function(d){
                           if(d.Record == 'A'){
                              return 'RED';}
                          else{
                              return 'GREEN';
                               } 
                })
		.transition()
		.duration(line_transitionDuration)
		.style('opacity', 1);

	line_circles
		.exit()
			.transition()
			.duration(line_transitionDuration)
				// Leave the cx transition off. Allowing the points to fall where they lie is best.
				//.attr('cx', function(d, i) { return line_xAxis(i) })
				.attr('cy', function() { return line_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.line_x;
          return d.Date;//.toLocaleDateString();//+'</br>'+d.Date.to; 
        }
    });
       
    }
    

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-22

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

如何根据条件改变折线图中数据点的颜色？

如何根据条件改变折线图中数据点的颜色？

在R中控制折线图中数据点的边框颜色

Altair：如何更改折线图中的折线颜色？

如何使折线图中的每年变为不同的颜色

如何更改此折线图中每个部分的颜色？

如何根据切片器选择更改Power BI中折线图的数据颜色

更改以R为基准的折线图中特定数据点的符号

如何使用dimple.js更改折线图中的折线颜色？

根据属性值将不同的颜色分配给折线图中的垂直线

Chart.js - 折线图最右边的数据点

如何显示只有1个数据点的折线图

如何使用JavaScript中的自定义数据点和线型创建折线图

如何在具有多个y轴的多折线图上绘制数据点

如何在highChart.js折线图中的Y轴上的标签中显示最后一个数据点值

在Excel折线图中更改系列的颜色

在折线图中选择时更改圆圈颜色

Google图表-如何更改折线图中正负轴值的线条颜色

如何在简单的谷歌折线图中为不同的值范围使用不同的颜色？

如何根据r中的分类列更改图表中折线图的颜色？

Google图表：根据折线图上的名称更改颜色

不要在ChartJS折线图中按条件画线

Google折线图颜色？

如何在高图中绘制带有系列数据的折线图？

如何在折线图中显示系列中的第一个数据？

如何在 NVD3 折线图中设置启用/禁用数据集？

Google Data Studio在折线图中隐藏数据

json数据在jqplot折线图中未正确绑定

javafx折线图中左侧的Shift绘制数据

制作折线图，使折线穿过所有数据点

如何在JavaFX折线图中删除图例