a ver si alguien me puede ayudar soy relativamente nuevo en javascript y estoy intentando corregir valores nulos en un gráfico os dejo el codigo para ver is alguien me puede ayudar.
La idea es desde un tabla de datos en este caso [fecha y valor] en el cual algunos valores son nulos, con esa tabla se genera un gráfico en el que obviamente faltan datos que hay que corregir. Los errores los corregiremos manualmente dibujando en el propio gráfico para que se de forma más intuitiva.
hasta el momento tengo hecho hasta el punto de generar el gráfico, dibujar sobre él y guardar lo nuevos datos en una array.
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graficos</title>>
</head>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://d3js.org/d3-array.v2.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-format.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<script src="https://d3js.org/d3-scale.v3.min.js"></script>
<style>
.line {
fill: none;
stroke: steelblue;
stroke-width: 3px;
}
.dot {
fill: rgb(0, 255, 21);
stroke: #fff;
}
.dotover {
fill: #ff7300;
stroke: rgb(255, 255, 255);
stroke-width: 2px
}
.draw{
fill: none;
stroke: rgb(78, 78, 78);
stroke-width: 5px;
}
</style>
<body>
<button type="button" onclick="update()">Done!</button>
<script>
var raton = false;
var activeLine;
var datum;
var dataset;
var DD = [];
var DD2 = [];
var newdata = [];
var m_pos;
var val = 0;
var margin = {top: 50, right: 10, bottom: 50, left: 50},
width = 800 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var parseTime = d3.timeParse("%d-%b-%y");
var x = d3.scaleTime()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var valueline = d3.line()
.defined(d => !isNaN(d.close))
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); })
.curve(d3.curveMonotoneX);
var renderPath = d3.line()
.x(function(d) { return d[0]-53; })
.y(function(d) { return d[1]-53; })
.curve(d3.curveMonotoneX)
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", ended))
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
function dragstarted() {
raton = true;
console.log(raton);
activeLine = svg.append("path")
.datum([])
.attr("class", "draw")
.style("stroke-linecap", "round")
.style("stroke-linejoin", "round");
activeLine.datum().push(d3.mouse(this));
datum = activeLine.datum();
}
function dragged() {
activeLine.datum().push(d3.mouse(this));
activeLine.attr("d", renderPath);
datum = activeLine.datum();
}
function ended() {
raton = false;
console.log(raton);
}
function update(){
console.log(DD);
svg.selectAll("path")
.remove()
.exit();
svg.selectAll(".dot")
.remove()
.exit();
svg.selectAll("rect")
.remove()
.exit();
svg.selectAll(".draw")
.remove()
.exit();
svg.append("path")
.data(data)
.attr("class","line")
}
// -------------- INICIO --------------
d3.csv("TS_2.csv").then(function(data) {
data.forEach(function(d) {
d.date = parseTime(d.date);
d.close = +d.close;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
function enterr(){
if (raton === true){
m_pos = d3.mouse(this);
var temp = (y.invert(m_pos[1]));
var temp1 = (d3.select(this).attr("x"));
temp1 = Number(temp1) + 8;
var temp2 = (x.invert(temp1));
DD.push(m_pos);
}}
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline);
svg.selectAll(".dot")
.data(data.filter(function(d){return d.close > 0;})) // para no dibujar null .filter(function(d){return d.close > 0;})
.enter()
.append("circle")
.attr("class", "dot")
.attr("cy", function(d) { return y(d.close)
})
.attr("cx", function(d,) { return x(d.date)
})
.attr("r", 5)
.on("mouseover", function(d) {
d3.select(this).attr("r", 8).style('fill', 'orange')
})
.on("mouseleave", function(d) {
d3.select(this).attr("r",5).style('fill','rgb(0, 255, 21)')
});
svg.selectAll("bar")
.data(data.filter(function(d){return isNaN(d.close);}))
.enter()
.append('rect')
.style("fill", "steelblue")
.style("opacity", 0.2)
.attr("x", function(d) {return x(d.date)-2.5 })
.attr('y',0)
.attr("width", 2)
.attr("height", 300)
.on("mouseout", enterr);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
svg.append("g")
.call(d3.axisLeft(y))
})
</script>
</body>
El gráfico por ahora se ve asi: