मैं d3.js के लिए नया हूं और जब मैं और अधिक सीखने की योजना बना रहा हूं तो यह बहुत अच्छा होगा यदि मुझे इस समस्या पर कुछ विशिष्ट सहायता मिल सके। मैं एक विश्लेषणात्मक कार्य के एक्स-अवरोधन को इंगित करने वाली एक लंबवत रेखा प्लॉट करना चाहता हूं। यह एक बोनस होगा यदि x-अवरोधन को विश्लेषणात्मक रूप से निर्धारित नहीं किया गया था ताकि यह विधि उन कार्यों के लिए काम करे, जिनके x-अवरोधन को हल करना 'कठिन' है।
मेरे पास एक प्लॉट का न्यूनतम उदाहरण है जिसमें मैं लंबवत रेखा जोड़ना चाहता हूं। मैं बस y=x+b की साजिश रच रहा हूं जहां b एक पैरामीटर है जिसे उपयोगकर्ता नियंत्रित कर सकता है।
संपादित करें स्पष्ट करने के लिए, मुझे एक लंबवत svg रेखा चाहिए जिसका एक्स-निर्देशांक फ़ंक्शन के एक्स-अवरोध के समान है (मेरे न्यूनतम उदाहरण में लंबवत रेखा के नीचे स्थिति -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>1 उत्तर
आप स्लाइडर द्वारा परिभाषित नकारात्मक स्थिति में रेखा को रखने के लिए आपके द्वारा बनाए गए तराजू का उपयोग कर सकते हैं।
यहां आपका थोड़ा संशोधित स्निपेट है। आशा है कि इससे सहायता मिलेगी।
<!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));
var verticalLine = svg.append('line');
// 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);
// mod here
verticalLine
.attr('x1', () => x(-b))
.attr('x2', () => x(-b))
.attr('y1', 0)
.attr('y2', height + margin.top + margin.bottom)
.attr('stroke', 'green');
}
// Draw the initial chart - this will also be called every time we update the sliders
draw();
</script>
</body>
</html>