मैं d3.js का उपयोग करके एक सूचना-योग्य पर आधारित गतिशील रेखा चार्ट बनाना चाहता हूं। मैंने जानकारी को दो सरणियों में बदल दिया है: एक एक-आयामी सरणी xValueArray: [0, 10, 20, 30, 40] और एक दो-आयामी सरणी yValueArray: [[0, 20, 30, 40, 50], [0, 200, 250, 400, 450]]। मेरा तर्क यह है कि मैं x और y-निर्देशांक का प्रतिनिधित्व करने के लिए yValueArray में दोनों सरणियों के लिए मैप किए गए xValueArray के साथ एक डेटासेट प्राप्त कर सकता हूं। इसलिए, मैंने डेटासेट बनाने के लिए मानचित्र फ़ंक्शन का उपयोग किया है।
var result = xValueArray.map(function (x, i) {
return [x, yValueArray[0][i]];
});
console.log(result); //returns [[0,0], [10,20], [20,30], [30,40], [40, 50]]
var data = result.map(function(d) {
return {
x: d[0],
y: d[1]
};
});
console.log(data); //returns [[x:0, y:0], [x:10, y:20], [x:20, y:30], [x:30, y:40], [x:40, y:50]]
//************* Plotting of graph ***************
var lineFunction = d3.line()
.x(function(d) {return x(d.x); })
.y(function(d) {return y(d.y); })
.curve(d3.curveLinear);
//plot line
var path1 = g.append("path")
.attr("class", "path1")
.attr("id", "blueLine")
.attr("d", lineFunction(data))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none")
.attr("clip-path", "url(#clip)");
लाइन चार्ट को ठीक से प्लॉट किया जाएगा, केवल एक लाइन के साथ प्लॉट किया जाएगा क्योंकि मैंने केवल yValueArray में xValueArray में पहली सरणी मैप की है। हालांकि, मैं चार्ट को गतिशील बनाना चाहता हूं, जिसका अर्थ है कि मैं चाहता हूं कि लाइन चार्ट को डेटा फ़ील्ड की संख्या के अनुसार प्लॉट किया जाए, जो मेरे उपयोगकर्ता के इनपुट में इंफोटेबल है। इस स्थिति में, डेटा फ़ील्ड की संख्या 2 है क्योंकि yValueArray में 2 सरणियाँ हैं। यदि डेटा फ़ील्ड की संख्या बढ़ जाती है, तो yValueArray में सरणियों की संख्या भी बढ़ जाती है और मुझे लाइन चार्ट पर संबंधित लाइन को प्लॉट करना होता है।
मै यह कैसे कर सकता हूँ? कोई भी मदद बहुत ही सराहनीय होगी!
1 उत्तर
y मानों को मैप करने के लिए आधार के रूप में अपने x सरणी का उपयोग करने के बजाय, इसे दूसरे तरीके से करें:
const yValueArray = [
[0, 20, 30, 40, 50],
[0, 200, 250, 400, 450]
];
const xValueArray = [0, 10, 20, 30, 40];
const data = yValueArray.map(data =>
data.map((d, i) => ({
x: xValueArray[i],
y: d
}))
);
console.log(data);यह yValueArray पर आपके पास कितने आंतरिक सरणियों के लिए काम करेगा।
फिर उस डेटा का उपयोग अपने एंटर चयन में करें:
const yValueArray = [
[0, 20, 30, 40, 50],
[0, 200, 250, 400, 450]
];
const xValueArray = [0, 10, 20, 30, 40];
const data = yValueArray.map(data =>
data.map((d, i) => ({
x: xValueArray[i],
y: d
}))
);
const x = d3.scaleLinear();
const y = d3.scaleLinear();
const lineFunction = d3.line()
.x(function(d) {
return x(d.x);
})
.y(function(d) {
return y(d.y);
})
.curve(d3.curveLinear);
const path1 = d3.select("svg").selectAll(null)
.data(data)
.enter()
.append("path")
.attr("d", lineFunction)
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="400"></svg>