Я новичок в d3.js, и хотя я планирую узнать намного больше, было бы здорово, если бы я мог получить некоторую конкретную помощь по этой проблеме.Я хотел бы построить вертикальную линию, обозначающую точку пересечения x аналитической функции.Было бы неплохо, если бы x-intercept был , а не , определяемый аналитически, чтобы метод работал для функций, для которых x-intercept является "трудным" для решения.
У меня есть минимальный пример графика, к которому я хотел бы добавить вертикальную линию.Я просто рисую y=x+b, где b - это параметр, который пользователь может контролировать.
РЕДАКТИРОВАТЬ Чтобы уточнить, я бы хотел вертикальную линию SVG, координата X которой совпадает с X-перехват функции (в моем минимальном примере ниже вертикальная линия будет впозиция -b).И я хотел бы, чтобы эта вертикальная линия обновлялась на основе пользовательского ввода, который обновляет функцию.Что-то вроде сплошной черной вертикальной линии, которая «скользит» при изменении функции.
<!DOCTYPE html>
<head>
<title>xintercept</title>
<meta charset="utf-8">
<style>
path.line {
stroke: red;
stroke-width: 2px;
fill: none;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class='chart'>
<form>
<fieldset>
<label>b:</label>
<input id=b type=range min=-10 max=10 step=.1 oninput='draw()' value=2 />
<output></output>
</fieldset>
</form>
<svg></svg>
</div>
<script>
// Setup chart dimensions and margins
var margin = {
top: 20,
right: 20,
bottom: 20,
left: 20
};
var width = 500 - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;
// Setup scales - notice no domain, we'll do that on chart render
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
x.domain([-10, 10]);
y.domain([-10, 10]);
// Setup line generator
var line = d3.line()
.x(function(d) {
return x(d.x);
})
.y(function(d) {
return y(d.y);
});
// Setup svg element
var svg = d3.select('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
// Create axes
svg.append('g')
.attr('class', 'axis axis--x')
.attr('transform', 'translate(0,' + height / 2 + ')')
.call(d3.axisBottom(x));
svg.append('g')
.attr('class', 'axis axis--y')
.attr('transform', 'translate(' + width / 2 + ',0)')
.call(d3.axisLeft(y));
// Draw chart
function draw() {
var bNode = document.querySelector('#b');
var b = bNode.value;
bNode.parentNode.querySelector('output').textContent = b;
// Construct data from a, b, c
var data = d3.range(-10, 10, 0.01).map(function(v) {
return {
x: v,
y: 1 * v + 1 * b
};
});
// JOIN
var paths = svg.selectAll('path.line')
.data([data]);
// ENTER
paths.enter().append('path')
.attr('class', 'line')
// ENTER + UPDATE
.merge(paths)
.transition()
.duration(0)
.attr('d', line);
}
// Draw the initial chart - this will also be called every time we update the sliders
draw();
</script>
</body>
</html>