स्कैटर प्लॉट

Question

के लिए डेटा के साथ डी 3 संक्रमण विधि का उपयोग करना, इसलिए मैं डी 3 के लिए नया हूं और सामान्य रूप से जावास्क्रिप्ट के साथ थोड़ा सा विस्तार नहीं करता हूं। इसलिए मैं कुछ ट्यूटोरियल का पालन कर रहा हूं जो वर्तमान में स्रोत कोड का उपयोग कर रहा है जो मूल स्कैटर प्लॉट बनाता है। अब मेरा सवाल यह है कि जब मैं अधिक डेटासेट जोड़ता हूं तो सर्कल को स्थानांतरित करने के लिए मैं संक्रमण() विधि का उपयोग कैसे करूं? मैं बटन सेट अप करने में सक्षम होना चाहता हूं और जब कोई उपयोगकर्ता उन्हें दबाता है, तो यह संबंधित डेटासेट के साथ संक्रमण() विधि को सक्रिय करता है। ट्यूटोरियल मैं संक्रमण पर केवल पढ़ने के लिए डेटा के बिना, और कई

//Width and height 
var w = 900; 
var h = 600; 
var padding = 30; 


//Static dataset 
var dataset = [ 
    [50, 30], [300, 75], [123, 98], [70, 40], [247, 556], 
    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], 
    [600, 150] 
];   

//Create scale functions 
var xScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function(d) { return d[0]; })]) 
    .range([padding, w - padding * 2]); 

var yScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
    .range([h - padding, padding]); 

var rScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
    .range([4, 4]); 

//Define X axis 
var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .orient("bottom") 
    .ticks(5); 

//Define Y axis 
var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("left") 
    .ticks(5); 

//Create SVG element 
var svg = d3.select("body") 
    .append("svg") 
    .attr("width", w) 
    .attr("height", h); 


//Create circles 
svg.selectAll("circle") 
    .data(dataset) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d) { 
     return xScale(d[0]); 
    }) 
    .attr("cy", function(d) { 
     return yScale(d[1]); 
    }) 
    .attr("r", function(d) { 
     return rScale(d[1]); 
    }) 
    .attr("fill", "blue"); 

//Create X axis 
svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + (h - padding) + ")") 
    .call(xAxis); 

//Create Y axis 
svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(" + padding + ",0)") 
    .call(yAxis); 

Answer 1

पहले आइटम के साथ एक भी आयत पर एक संक्रमण से पता चला है और इसे मैन्युअल रूप से किया था,, संक्रमण मुद्दे को संबोधित करने से पहले, आप चीजों को थोड़ा refactor करने के लिए की जरूरत है। जब भी आपका डेटा बदलता है, तो आप update(newData) फ़ंक्शन को कॉल करना चाहते हैं, और यह फ़ंक्शन सभी आवश्यक अपडेट करता है।

This tutorial mbostock द्वारा बिल्कुल "सामान्य अद्यतन पैटर्न" का वर्णन करता है जो आपको चाहिए।

पार्ट्स II और III फिर यह बताएं कि इस पैटर्न में संक्रमण कैसे कार्य करें।

वे बहुत कम हैं। और एक बार जब आप उन्हें समझ लेंगे, तो आपके पास ऐसा करने के लिए आवश्यक सभी जानकारी होगी।

Answer 2

मुझे लगता है कि तुम सिर्फ .transition() के बाद समारोह .data(newData) समारोह

निम्न उदाहरण Y2 में एक JSON फ़ाइल, जहां Y1 पिछले एक का उपयोग किया

उदाहरण था में एक नोड है निर्दिष्ट करने के लिए है:

//Creating the button 
var button = d3.select("body") 
.append("input") 
.attr("type","button") 
.attr("value", "A button"); 

//Transitioning process 
button.on("click", function() 
{ circles 
    .data(data.Y2) 
    .transition() 
    .attr("cx", function(d) 
    { 
     return d[0]; 
    } 
    ) 
    .attr("cy", 300); 
} 
)