Я разработал линейную диаграмму, используя D3.js. Линия идет только по оси x. Он содержит точки данных и когда мышь перемещается по этой точке данных, просто показывает всплывающую подсказку, которая содержит некоторые конкретные данные об этой точке данных. Мне нужно было добавить точку данных один за другим, значит, появится первая точка данных, а следующая появится через 1 минуту и так далее. Поэтому я добавляю точки данных в строку за период времени. Это означает, что я установил функцию setInterval и точку данных, добавленную один за другим внутри этой функции. (Для этого я увеличиваю массив, который хранит данные шаг за шагом и каждый раз, когда точки данных перезаписываются, и он показывает, что новая точка данных добавляется внутри временного интервала.)Как изменить цвет точки данных в линейной диаграмме в соответствии с условием?
Тогда мне нужно было изменить цвет конкретного данные пункт. В соответствии с этим примером, если конкретный элемент данных имеет «A» в качестве значения «Record», тогда мне нужно изменить цвет его точки данных. Но согласно перезаписи или любой другой ошибке, она работает неправильно. Может кто-нибудь, пожалуйста, покажите, где я был не прав, и есть ли возможность сделать эту задачу легче, чем этот путь?
(я пытался объяснить это мое самое лучшее. Иногда вы можете не понять, что я, возможно, say.So этот код поможет вам понять это правильно)
<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,
\t line_dataCirclesGroup = null,
\t line_dataLinesGroup = null;
var line_maxDataPointsForDots = 50,
\t 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) {
\t \t line_dataCirclesGroup = line_svg.append('svg:g');
\t }
\t var line_circles = line_dataCirclesGroup.selectAll('.data-point').data(duplicateDataForLineChart);
\t \t //.data(data);
\t line_circles
\t \t .enter()
\t \t \t .append('svg:circle')
\t \t \t \t .attr('class', 'data-point')
\t \t \t \t .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
\t \t .enter()
.append('svg:circle')
\t \t \t \t .attr('class', 'data-point')
\t \t \t \t .style('opacity', 1e-6)
.style('fill','#FF45FF');
}
}
\t line_circles
\t \t .attr('cx', function(d) { return line_x(d.Date); })
\t \t .attr('cy', function(d) { return line_y(d.Value); })
\t \t .attr('r', function() { return (duplicateDataForLineChart.length <= line_maxDataPointsForDots) ? line_pointRadius : 0 })
\t \t .transition()
\t \t .duration(line_transitionDuration)
\t \t .style('opacity', 1);
\t line_circles
\t \t .exit()
\t \t \t .transition()
\t \t \t .duration(line_transitionDuration)
\t \t \t \t // Leave the cx transition off. Allowing the points to fall where they lie is best.
\t \t \t \t //.attr('cx', function(d, i) { return line_xAxis(i) })
\t \t \t \t .attr('cy', function() { return line_y(0) })
\t \t \t \t .style("opacity", 1e-6)
\t \t \t \t .remove();
$('svg circle').tipsy({
gravity: 'width',
html: true,
title: function() {
console.log(this.__data__);
var d = this.__data__;
\t //var pDate = d.line_x;
return d.Date;//.toLocaleDateString();//+'</br>'+d.Date.to;
}
});
}
</script>
</body>
</html>
Спасибо за ваш ответ. Здесь OriginalDataForLineChart имеет два значения «A». Но есть только одна красная точка. Можете ли вы сказать мне, почему это так? –
А также должно быть 5 точек данных .. Но это показывает 4 точки данных? У моего кода также есть эта проблема. В чем причина этого? –
Это связано с неправильным значением i в функции setInterval. – tejesh95