Здравствуйте, Умака Кумакаки, Вы писали:
Я прям открыл этой темой шкатулку с неадекватами
УК>самому первому что учится фрилансер, это распознавать неадекватных заказчиков. Самый верный признак неадекватного заказчика — его слова о том что это "делать пару часов", "для профессионала минутное дело" и всё в таком духе. Это просто как автоматом лейбл "я заказчик-мудак" себе повесить.
Ни в ТЗ, ни в тексте задания про "пару часов" ничего нет. Свои влажные фантазии нужно вытирать салфетками, а то неприлично. Кстати, я очень часто слышал от русских, что с русскими заказчиками работать не надо, потому что "они все жадные и тупые". Но вот странно — у меня такой проблемы никогда не было.
УК>делал подобную задачу десять лет назад примерно за неделю и $2000 баксов.
Ну молодец, что сказать. Странно, что выбрал такой сложный путь, чтобы разводить людей, есть ведь способы проще и прибыльнее.
УК>всё что он смог за час это нагуглить ответы на стековерфлоу.
Не, ну ты-то не смотришь никогда туда и вообще не гуглишь. Прямиком к ноосфере подключаешься и оттуда черпаешь знания. А вообще, я что-то пропустил — стековерфлоу теперь нельзя использовать?
УК> топикстартер лютый балобол. кода от него мы, конечно же, не увидим.
А должен? Ну на, смотри.
| | Код на $2000 |
| | <!DOCTYPE html>
<html>
<head>
<title>D3.js Real-Time Line Chart</title>
<style>
.chart-container {
width: 100%;
height: 300px;
margin-bottom: 20px;
}
.line {
fill: none;
stroke-width: 2px;
}
</style>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<div id="chart-container">
<svg id="chart"></svg>
</div>
<script>
// Establish a WebSocket connection
const socket = new WebSocket('ws://signal.mmr.systems:8080');
// Set up the D3.js line chart
const container = document.getElementById('chart-container');
const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight;
const svg = d3.select('#chart')
.attr('width', containerWidth)
.attr('height', containerHeight);
const margin = { top: 20, right: 20, bottom: 30, left: 50 };
const width = containerWidth - margin.left - margin.right;
const height = containerHeight - margin.top - margin.bottom;
const g = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleTime().range([0, width]);
const y = d3.scaleLinear().range([height, 0]);
const line = d3.line()
.x(d => x(d.time))
.y(d => y(d.value));
g.append('g')
.attr('class', 'x-axis')
.attr('transform', `translate(0, ${height})`)
.call(d3.axisBottom(x));
g.append('g')
.attr('class', 'y-axis')
.call(d3.axisLeft(y));
const data = {}; // Object to store data for each line
// Handle incoming WebSocket data
socket.addEventListener('message', event => {
const message = JSON.parse(event.data);
const time = new Date(message.time * 1000);
const values = message.values;
updateChart(time, values);
});
// Function to update the chart with new data
function updateChart(time, values) {
values.forEach((value, index) => {
const lineName = `line${index + 1}`;
if (!data[lineName]) {
// Initialize data for each line
data[lineName] = {
values: [],
color: d3.schemeCategory10[index], // Use different colors for each line
};
// Add the line path for the new line
g.append('path')
.attr('class', `line ${lineName}`)
.style('stroke', data[lineName].color);
}
// Add the new data point to the line's data
data[lineName].values.push({ time, value });
// Update the chart
updateLine(lineName);
});
}
// Function to update an individual line in the chart
function updateLine(lineName) {
const lineData = data[lineName];
// Update the x-axis and y-axis scales based on the line data
x.domain(d3.extent(lineData.values, d => d.time));
y.domain([d3.min(lineData.values, d => d.value), d3.max(lineData.values, d => d.value)]);
// Select the line path and update its data and attributes
g.select(`.${lineName}`)
.datum(lineData.values)
.attr('d', line);
}
</script>
</body>
</html>
|
| | |
